Flexbox的定义及适用范围
Flexbox 即弹性盒子,应用时在 CSS 里写上 display : flex;
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。
- 任何一个容器都能指定为 flex 布局
- 行内元素也能指定为 flex
- webkit 内核的浏览器要加上 -webkit 前缀
注意:指定 flex 后,子元素的 float, clear, vertical-align 属性均失效。
容器的轴线
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main
end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
容器的属性
- flex-direction : 决定项目的排列方向
|
|
( row 为水平排列,column 为垂直排列 )
|
|
( nowrap 为不换行,wrap 为换行 )
|
|
|
|
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
|
|
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
|
|
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
项目的属性
order, flex-grow, flex-shrink, flex-basis, flex, align-self
详情见 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool