一、什么是flex布局?
flex布局就是弹性布局,用来为盒装模型提供最大的灵活性。任何元素都能指定为Flex布局(行内元素,行内块,块级元素),webkit内核的浏览器,需要加上-webkit前缀,
设为flex布局后,子元素的float、clear、和vertical-align属性将都失效
二、容器的属性
1、flex-direction:决定项目排列的方向
属性值 row(默认值):主轴为水平方向,起点在左端;
row-reverse:主轴为水平方向,起点在右端;
column:主轴为垂直方向,起点在顶部;
column-reverse:主轴为垂直方向,起点在底部
2、flex-wrap属性:所有项目都排在一条轴上,如果排不开,如何换行
属性值: nowrap:(默认)不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下边
3、flexf-low属性:flex-direction属性和flex-wrap属性的简写形式
flex-flow:row wrap;(默认值)
4、justify-content属性
属性值 row(默认值):主轴为水平方向,起点在左端;
flex-start(默认值):左对齐;
flex-end:右对齐;
center:居中;
space-between:两端对齐,项目之间的间隔都相等;
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。