CSS3特性及应用【2】—— 弹性盒子模型，关于flex的那些事

弹性盒子模型

CSS3 的弹性盒子模型（Flexbox）是一种布局模型，旨在用更简单、更灵活的方式来实现容器内元素的对齐、分布和排序。

弹性容器 Flex Container

.container {
  display: flex;
}

设置 display属性为flex 或 inline-flex 可以将一个元素设置为弹性容器，它们的直接子元素称为弹性项（Flex Item)。

弹性容器属性------flex-direction

flex-direction属性决定主轴的方向，即伸缩项目的排列方向。

弹性盒子模型中，主轴（Main Axis）是指弹性容器内部的主要方向，弹性项在该方向上排列。

通过设置 flex-direction 属性来改变主轴的方向。该属性可选择以下四个值：

row：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上端。

column-reverse：主轴为垂直方向，起点在下端。

弹性容器属性 ------ flex-wrap属性

flex-wrap用于控制弹性容器中的弹性项在一行排列不下时的换行方式。

flex-wrap 属性有以下三个可选值：

1. nowrap：弹性项不换行，尽可能地在一行内排列（默认值）。
2. wrap：弹性项在必要时换行，排列成多行。
3. wrap-reverse：弹性项在必要时换行，排列成多行，但是行的顺序从后往前排列。

flex-flow属性可以同时设置 flex-direction 和 flex-wrap 两个属性的值

例如，

.container {
  display: flex;
  flex-flow: row wrap;
}

上面的代码将弹性容器的主轴方向设置为水平方向，换行方式设置为多行排列。

弹性容器属性------justify-content属性

justify-content属性用于控制弹性项 在水平主轴上的对齐方式。

它可以设置在弹性容器上，用于控制容器内的所有弹性项的对齐方式，也可以设置在单个弹性项上，用于控制该弹性项的对齐方式。

justify-content 属性有以下几个可选值：假设水平主轴为从左到右：

1. flex-start：靠主轴起点对齐（默认值）。 左对齐
2. flex-end：靠主轴终点对齐。 右对齐
3. center：居中对齐。
4. space-between：两端对齐，首尾不留空隙，伸缩项目之间间距相等。
5. space-around：将弹性项均匀分布在主轴上，首尾留出一半的空隙。
6. space-evenly：将弹性项均匀分布在主轴上，每个弹性项之间的空隙相等。

弹性容器属性------align-items 属性

align-items 属性用于控制弹性项在垂直轴上的对齐方式。

它可以设置在弹性容器上，用于控制容器内的所有弹性项的对齐方式，也可以设置在单个弹性项上，用于控制该弹性项的对齐方式。

align-items 属性有以下几个可选值：

1. flex-start：将所有弹性项靠交叉轴起点对齐。
2. flex-end：将所有弹性项靠交叉轴终点对齐。
3. center：将所有弹性项在交叉轴上居中对齐。
4. baseline：将所有弹性项在基线上对齐，这里的基线指的是弹性项内文本的基线，如果弹性项内没有文本，则与 flex-start 对齐。
5. stretch：将所有弹性项在交叉轴上拉伸至与弹性容器等高或等宽（默认值）。

弹性容器属性------align-content 属性

针对多行的对齐方式

order 指定弹性项的顺序

通过 .item{order:2};

来为一个弹性项指定它的次序。最终弹性项会按照指定的order大小从小到大排列。

弹性项属性------ flex 属性

flex 用于同时设置 flex-grow、flex-shrink 和 flex-basis 三个属性的值。这三个属性一般都是一起使用的。

flex: <flex-grow> <flex-shrink> <flex-basis>

1. <flex-grow>【子项目放大比例】：一个非负数，表示弹性项的放大比例，默认值为 0，表示不放大。
2. <flex-shrink>【子项目缩小比例】：一个非负数，表示弹性项的缩小比例，默认值为 1，表示弹性项可以缩小。
3. <flex-basis>：一个长度值或关键字 auto，表示弹性项的基准尺寸。默认值为 auto，表示弹性项的基准尺寸由其内容决定。

例如，下面的代码将一个弹性项的放大比例设置为 1，缩小比例设置为 2，基准尺寸设置为 100px：

.item {
  flex: 1 2 100px;
}

*需要注意的是，如果 flex 属性只设置一个非负数值，相当于将该值设置为 flex-grow 属性的值，而 flex-shrink 会默认为 1，flex-basis 会默认为 0%。

*flex：1，其实就是 flex-grow:1;flex-shrink:1;flex-basis:0% 这三个属性的简写

例如，下面的代码将一个弹性项的放大比例设置为 2：

.item {
  flex: 2;
}

弹性项属性 ------ align-self 子元素垂直对齐

用于单独设置一个弹性项的垂直对齐方式

*最后一张图总结上述的弹性盒子知识点

弹性盒子模型的应用

实现元素的水平居中、垂直居中、等分布局

实现元素的水平居中

想要实现元素的水平居中，那么可以直接在父元素中添加

.parent {
    display:flex;
    justify-content:center;
}

实现元素的垂直居中

想要实现元素的垂直居中，前提时需要已知父元素的高度.

.parent {
    height:100px;
    display:flex;
    align-items:center;
}

实现等分布局

等分布局，常见于在菜单布局中，子元素在父元素中横向均匀分布

.parent {
display: flex;
justify-content: space-between;
}

实现响应式布局

响应式布局的目的是为了让我们的页面能够在不同大小的设备屏幕上正常展示。能够使一张页面适配多种屏幕的布局方案，就是所谓的"响应式布局方案"。

flex-basis 属性和 flex-grow 属性可以很方便地实现响应式布局

.parent {
display: flex;
}
.child1 {flex-basis: 50%;flex-grow: 1;}
.child2 {flex-basis: 30%;flex-grow: 1;}
.child3 {flex-basis: 20%;flex-grow: 1;}

对父元素添加flex弹性属性，对子元素设置fles-basis属性

实现自适应宽度

使用 flex 布局可以很方便地实现自适应宽度，即让元素宽度随着容器宽度的变化而自动调整。

.container {
  display: flex;
}

.item {
  flex: 1;
}