Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性
注意:设置了 display:flex 之后 ,子元素的float
、clear
和vertical-align
属性将失效。
一、基本概念
二、容器的属性
1、flex-direction 决定容器内元素的排列方向,也就是主轴方向。
语法
共有4个值:
2、flex-wrap: 默认情况下所有元素都排列在一条轴线上。flex-wrap.定义了如果在一行放不下的换行问题
3、flex-flow:是 flex-direction 和 flex-wrap 属性的简写
语法:默认为:flex-flow:row nowrap
4、justify-content 定义了元素在主轴上的对齐方式
有五个值:
5、align-items 属性定义在纵轴如何对齐,也就是在交叉轴如何对齐。
可以取5个值:
6、align-content: 定义多根轴线的对齐方式,如果只有一根,则该属性不起作用 。
三、项目的属性,也就是容器内元素的属性
1、order 属性
2、flex-grow 属性
3、flex-shrink 属性
4、flex-basis 属性
5、flex flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选
6、align-self 属性