注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
一、容器的属性
第一步:设置父元素为弹性容器:display:flex;
当子元素的宽度和大于父元素时,回自动调整宽度,不会超出父元素
1、子元素的排列方向
默认水平从左到右,属性row
属性:
flex-direction
属性值:
row:水平从左到右
row-reverse:水平从右到左
column:从上到下
column-reverse:从下到上
2、子元素换行
默认情况下不会换行,而是减小子元素的宽度
属性:
flex-wrap
属性值:
nowrap:不换行
warp:换行
wrap-reverse:从下开始排列,换行且反转
3、子元素水平分布
属性:
justify-content
属性值:
flex-start:从左到右
flex-end:从右到左
center:水平居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等
4、子元素垂直分布
属性值:
align-items
属性值:
flex-start:从上到下
flex-end:从下到上
center:居中
详细内容:https://www.runoob.com/w3cnote/flex-grammar.html