CSS弹性盒子

介绍

在响应式 Web 设计中，UI 布局必须适配不同尺寸的设备。
CSS3 引入了 Flexible Box，简称 flexbox（弹性盒子），它特别适合用来创建弹性的页面布局。
弹性布局以一种可预见的方式排列元素，使其适用于不同尺寸的设备。

使用说明

在一个元素的 CSS 中添加display: flex; 该元素会变为flex容器，默认它的子元素会从左到右逐个排列，把flex容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。

父元素属性

下面属性在父元素中设置，用于设置整个CSS弹性盒子的样式。

1. flex-direction: row;属性可以设置子元素的排列方式，默认值是row。其他可选值包括：column，row-reverse和column-reverse。
2. justify-content: flex-start 可以更改 flex 子元素在主轴排列方式。
   1. center: flex 子元素排列在 flex 容器中间。
   2. flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
   3. flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
   4. space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
   5. space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边。
3. align-items: stretch属性，可以用于在交叉轴调整 flex 子元素。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。
   1. flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
   2. flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
   3. center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
   4. stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
   5. baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
4. flex-wrap: nowrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。换行方向的可选值有这些：
   1. nowrap：默认值，不换行。
   2. wrap：行从上到下排，列从左到右排。
   3. wrap-reverse：行从下到上排，列从右到左排。

子元素属性

下面属性在子元素中设置，用于设置CSS弹性盒子中指定某个盒子的样式。

1. flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。接受number类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink为 1 ，另一个项目flex-shrink为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。
2. flex-grow与flex-shrink相对。flex-shrink会在容器太小时对元素作出调整。相应地，flex-grow会在容器太大时对元素作出调整。如果一个项目flex-grow属性的值为 1，另一个flex-grow为 3，那么 3 的会比 1 的扩大三倍。
3. flex-basis属性指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。flex-basis属性的单位与其他 size 属性一致（px、em、%等）。如果值为auto，项目的大小依赖于自身内容
4. 上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1; flex-shrink: 0; flex-basis: 10px;。属性的默认设置是flex: 0 1 auto;。
5. order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
6. align-self属性允许你调整每个元素自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整使用的属性都不能应用在 flex 子元素，所以这个属性显得十分有用。align-self的允许值与align-items一样，并且它会覆盖align-items的值。

搬运链接