一：display
display: flex
flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定Flex容器。现在所有的浏览器都支持该布局。
基本概念:
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
flex.png
容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。
1: 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end.
2: 交叉轴的开始位置叫做cross start，结束位置叫做cross end.
3: 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size.
二：
设置在该容器上的属性如下:
1: flex-direction
flex-direction属性：项目的排列方向
row: 主轴水平方向，起点为左端(默认)
row-reverse: 主轴水平方向，起点为右端
column: 主轴垂直方向，起点为上边沿
column-reverse: 主轴垂直方向，起点为下边沿
2: flex-wrap
flex-wrap属性：定义换行状况
nowrap: 不换行
wrap: 换行，第一行在上面
wrap-reverse: 换行，第一行在下面
3: flex-flow
flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
4: justify-content
justify-content定义在主轴上的对齐方式
flex-start（默认值）：在主轴上由左或者上开始排列
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍
5: align-item
align-items属性：定义在交叉轴上的对齐方式
flex-start | flex-end | center | baseline | stretch
align-item.png
6: align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content.png
网友评论