flex知识点精炼
- 原址:http://www.runoob.com/w3cnote/flex-grammar.html
容器的属性
- 设置Flex布局之后,子元素的float、clear、vertical align将失效。
- 任何一个容器都可以指定为flex布局。行内元素也可以使用flex布局,webkit内核的浏览器,必须加上-webkit前缀。
- flex-wrap属性默认的是不换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认是row nowrap。
- align-items属性的默认值是stretch:如果项目未设置高度或者为auto,将占满整个容器的高度。(aligin-content的默认属性也是stretch)
- align-content属性定义了多跟轴线的对其方式。如果项目只有一根轴线,该属性不起作用。
项目的属性
- order属性定义项目的排列顺序。数值越小排列越靠前默认为0。
- flex-grow的属性默认为0,flex-shrink的属性默认为1。它们两个都不能为负。
- flex-shrink的值越大,减小的越厉害。如果值为0,表示不减小
- flex属性:flex属性是flex-grow、flex-shrink、flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷键——auto(1 1 auto)none(0 0 auto)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
flex知识点精炼的更多相关文章
- flex知识点归纳
1.flex-shrink <div id="content"> <div class="box" style="backgroun ...
- html5与css3入门知识点精炼
<meta name = "keywords" content="…………"/>(网页搜索时要输入的关键字) <meta name = &qu ...
- 大三仍是Linux系统小白的我给大家讲讲学习历程
我与Linux结缘是在大三的时候.我与Linux熟识是在偶然遇到<Linux就该这么学>的时候.因为我是电子信息工程专业,在高年级时开设了嵌入式课程,嵌入式系统是一种专用的计算机系统,作为 ...
- Java编程思想读书笔记(一)【对象导论】
2018年1月7日15:45:58 前言 作为学习Java语言的经典之作<Java编程思想>,常常被人提起.虽然这本书出版十年有余,但是内容还是很给力的.很多人说这本书不是很适合初学者,我 ...
- flex布局知识点
flexBox 布局最合适小规模布局,而网格布局适合较大规模布局. float,clear,vertical-align 在flex中不起作用. flex布局中,有两类作用于父节点也子节点的样式,大 ...
- Flex 布局知识点梳理
传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...
- flex布局知识点(阮一峰博客)
任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局: 设为flex布局以后,子元素的float,clear,vertical-align属性都将失效: flex容器的属性: fle ...
- Flex布局兼容知识点总结
转载,原文http://www.cnblogs.com/tugenhua0707/p/5180841.html,部分截取 假设父容器class为 box,子项目为item.旧版语法如下:一:定义容器的 ...
- 弹性盒子布局(display:flex)知识点
设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.
随机推荐
- vue中需要注意的问题总结(上)
React 与其说是一种框架,倒不如说是一种开发范式.它的核心理念非常简单: 界面/视图就是数据结构的可视化表达UI = f(data) 而界面/视图由组件组合而来UI = f1(data) + f2 ...
- 数据库连接池c3p0
XML配置文件: <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <!- ...
- Python实现ATM+购物商城
需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...
- python 生成HTmL报告页面
计划做一个html页面 py3.4 代码: # -*- coding=utf-8 -*- # import time,os class Template_mixin(object): "&q ...
- 51nod1212 无向图最小生成树
N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 < ...
- linux系统中给mysql配置环境变量
安装过程就不写了,记得安装的路径就行,接下来要用到. 修改配置文件 vim /etc/profile 设置环境变量 写一个MYSQL_HOME,值为“mysql的安装路径” 在PATH后面加上$MYS ...
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- js获取数组中任意一项
1.获取数组任一项 在一些实际应用场景中,会要求实现一个随机的需求,随机获取某一项,来展示出来,都知道要通过javaScript的Math.random()方法来实现,这里我在Array的原型上添加了 ...
- 【习题 4-2 Uva201】Squares
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意那个星号的数量... 然后V x y的话,是从(y,x)向(y+1,x)连线. H x y才是从(x,y)向(x,y+1)连线 ...
- [bzoj2242][Sdoi2011]计算器_exgcd_BSGS
计算器 bzoj-2242 Sdoi-2011 题目大意:裸题,支持快速幂.扩展gcd.拔山盖世 注释:所有数据保证int,10组数据. 想法:裸题,就是注意一下exgcd别敲错... ... 最后, ...