一,基本概念
1.弹性盒子布局
2.2009由
W3C
提出的布局解决方案3.兼容性:所有的浏览器都支持
4.注意:
1.所有的元素都可以应用
flex
布局2.所有应用
flex
布局的子元素float
,clear
及vertical-align
属性都将失效1.容器(container):使用了flex布局的元素就是容器 display:flex; display:inline-flex; 2.项目(items):使用了flex元素的子元素 3.主轴(main size):默认水平方向,从左到右,项目默认沿主轴排列;可以通过flex-direction更改 4.交叉轴(cross size):默认垂直方向,从上到下
二、容器属性
1.flex-direction
:设置主轴方向
row:默认,水平方向,从左(main start)向右(main end)
row-reverse:水平方向,从右向左
column:垂直方向,从上向下
column-reverse:垂直方向,从下向上
2.flex-wrap
:设置当一条主轴放不下所有项目时,多余的项目该如何换行
nowrap:默认,不换行,宽度不够缩小
wrap:换行,多余项目在下面
wrap-reverse:换行,多余项目在上面
3.flex-flow
:flex-direction
和flex-wrap
简写
flex-flow:direction wrap;
4.justify-content
:设置项目在主轴上的对齐方式
flex-start:以main start所在的位置对齐,默认值
flex-end:以main end所在的位置对齐
center:主轴中心点对齐
space-between:两端对齐
space-around:项目在主轴上的两边外边距相同
5.align-items
:定义项目在交叉轴上如何对齐 --- 单根轴
flex-start:以cross start所在的位置对齐
flex-end:以cross end所在的位置对齐
center:交叉轴的中心点对齐
stretch:设置项目的大小(height/width)为交叉轴的长度,默认值 -- height/width设置为空或为auto
baseline:以项目中第一行文字的baseline对齐
6.align-content
:定义多根轴线时项目在交叉轴上对齐方式 --- 多根轴
flex-start:以cross start所在的位置对齐
flex-end:以cross end所在的位置对齐
center:交叉轴的中心点对齐
space-between:两端对齐
space-around:在交叉轴上的两边外边距相同,等同于align-items中的center效果
stretch:设置项目的大小为平均分配交叉轴的长度
三、项目属性
1.order
:设置项目的排列顺序,值越小越靠前,默认为0
2.flex-grow
:设置有剩余空间时项目的放大比例,默认为0
3.flex-shrink
:设置剩余空间不足时项目的缩小比例,默认为1,即剩余空间不足,项目缩小以适应容器
4.flex-basis
:设置项目的主轴空间,默认为auto
,即项目的实际大小
5.flex
:是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
-- 推荐使用
flex:grow shrink basis;
快捷值:auto:1 1 auto
none:0 0 auto