flex左右布局_掌握Flex布局的这几个常用属性，搞定弹性布局不在话下

1.使用display:flex声明一个Flex布局，这个容器称为Flex容器，其包含的子元素称为Flex项目

在Flex容器中有几个核心术语

1. 容器: 使用display:flex属性元素
2. 项目: 容器的"子元素"
3. 主轴: 项目排列的轴线
4. 交叉轴: 与主轴垂直的轴线

    flex快速实现水平居中和垂直居中

• 效果图：

2.容器属性

属性描述flex-flow主轴方向与换行方式justify-content项目在主轴上的对齐方式align-items项目在交叉轴上的对齐方式align-content项目在多行容器中的对齐方式

创建一个盒模型，声明为flex布局：

• html代码

item1

item2

item3

item4

item5

item6

item7

item8

• css样式：

• 效果图：

2.1 弹性项目在主轴上的排列方式

弹性项目在主轴上的排列方式有两种：

1.单行容器

flex-direction: row;

针对上面的样式，可以给.box一个样式：

flex-direction: row;flex-wrap: nowrap;

以上两行样式的意思是，有一个主轴沿水平方向的flex布局，并且它下面的项目水平排列不换行。效果图就是上述样式，因为默认的是水平排列不换行，这两行样式可以简写成一行：

flex-flow: row nowrap;

2.多行容器

flex-direction: column;flex-wrap: nowrap;

• 效果如图：

此时的主轴方向变成垂直方向了，水平方向变成了交叉轴，因此每个项目会沿着主轴垂直排列，如果设置了允许换行：

flex-direction: column;flex-wrap: wrap;

在一列排不下的时候，会自动换行到第二列，效果如图：

上面两行样式代码一样可以简写成：

flex-flow: column nowrap;

2.2 弹性项目在单行容器的对齐方式

• html：

item1

item2

item3

item4

item5

item6

item7

item8

• css样式：

• 效果图：

设置项目在单行容器主轴上的对齐有个前提：主轴上必须有剩余空间。

项目在主轴上的对齐方案：
1.将所有项目视为一个整体，在项目组两边进行分配

• 左对齐 justify-content: flex-start;
• 居中 justify-content: center;
• 右对齐 justify-content: flex-end;

这三个属性的效果如下图：

2.将项目视为一个个独立的个体，在项目之间进行分配

• 分散对齐 justify-content: space-around; 每个左右两边的间距相等
• 两端对齐 justify-content: space-between; 首尾项目顶格，每个项目之间的间距相等
• 平均对齐 justify-content: space-evenly; 每个项目之间的间距相等

这三个属性的效果如下图：

2.2 弹性项目在交叉轴上的排列方式

属性描述stretch默认效果，拉伸到容器的高度flex-start弹性项目沿交叉轴顶部对齐center弹性项目在容器里沿交叉轴居中flex-end弹性项目在交叉轴底部对齐。

/* 交叉轴的对齐方案 */.box {    align-items: stretch;    align-items: flex-start;    align-items: center;    align-items: flex-end;}

• 效果图：

• 注意：有一点值得注意的是，如果使用stretch，项目上不要设置高度，否则无法拉伸子项目的高度。

3.项目属性

属性描述flex项目的缩放比例与基准宽度align-self单个项目在交叉轴上的对齐方式order项目在主轴上排列顺序

现有如下的弹性盒模型：

• html：

item1

item2

item3

item4

• css样式：

• 效果图：

flex: 放大因子 收缩因子 项目在主轴上的基准宽度
flex: flex-grow flex-shrink flex-basis;

现在在.item项目上加上一个属性flex，有如下样式：

flex: 0 1 auto;

该值是默认效果，效果与上面的效果图一致，还可以写成：

flex: inherit;

允许放大或收缩，禁止放大或收缩

/* 允许放大或收缩 */flex: 1 1 auto;/* 禁止放大或收缩 */flex: 0 0 auto;

• 效果图：

禁止放大或收缩还可以写成：

flex: none;

如果只有一个参数，省略后面两个参数，表示放大因子，例如：

flex: 1;

上述的代码等价于：

flex: 1 1 auto;