flex:Flexible Box的缩写,意为弹性布局,用来为盒模型提供最大的灵活性(任何一个容器都可以指定为flex布局)
display:flex;
flex布局分为容器和项目
给哪个元素写flex布局哪个元素就是容器,它的子元素就是项目
(注:项目也可以是一个flex布局的容器)
flex布局中容器的属性
1.flex-direction属性:决定主轴的方向(即项目排列的方向)
flex-direction:row //(默认)水平布局 主轴横向,交叉轴竖向
column //竖直布局 主轴是竖向的
row-reverse //反向水平布局
column-reverse //反向竖直布局
(容器中有两种轴,主轴和交叉轴)
2.flex-wrap属性:项目在轴线上的排列方式(默认情况下,项目都排在一条线(轴线)上)
flex-wrap:nowrap//(默认)不换行
wrap//可以换行
wrap-reverse//反向换行(第一行在下第二行在...)
3.flex-flow是flex-direction和flex-wrap的简写
flex-flow:row wrap
等价于
flex-direction:r