简介

Flexbox是一种在布局中获得更大灵活性并简化响应式布局设计的好方法。它使在2D平面上对齐元素变得很容易，并且一旦您熟悉了主要属性，就非常容易使用。

第一步是在容器元素上设置display：flex。Flex容器的子元素成为Flex项。一组属性可以应用于Flex容器，并对所有项目产生整体影响，另一组不同的属性可以应用于Flex项目，并对目标项目产生影响。Flex项也可以是它所包含的元素的Flex容器，这使得创建复杂的布局变得容易。

<$>[信息]浏览器支持： 2020年的数据显示，全球98%的浏览器现在支持FlexBox，无需供应商前缀。<$>

以下是帮助快速了解Flexbox的快速入门知识。这不是所有可用属性、值和边界情况的详尽列表，而是最有用或最常用属性的快速概要。

Flex容器属性

这是一个带有3个跨距弹性项的容器，没有Flexbox：

 1<div class="box">
 2  <span class="item">
 3    <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">
 4  </span>
 5  <span class="item">
 6    <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
 7  </span>
 8  <span class="item">
 9    <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
10  </span>
11</div>

展示：Flex

现在，让我们通过在容器上设置DISPLAY：FLEX来自动改进它。请注意，这些项目现在如何自动扩展到容器中的可用空间：

1.container {
2  display: flex;
3}

弹性方向

可以使用flex-direction属性更改项目的方向：

1.container {
2  display: flex;
3  flex-direction: column;
4}

缺省值为ROW，其他可用值为行反转、列、列反转。

行-反转 和** 列-反转** 改变项的视觉顺序，而不需要改变HTML标记的顺序：

1.container {
2  display: flex;
3  flex-direction: column-reverse;
4}

<$>[注意]在行和列方向之间切换的能力使得在媒体查询中只需更改一条CSS规则就可以非常容易地在较小的设备上调整布局。<$>

JUSTIFY-Content

使用JUJUST-CONTENT将项目与主轴对齐。折弯方向为列时，主轴为Y轴；折弯方向为** 行** 时，主轴为X轴。

缺省值为FLEX-START，其他可用值为FLEX-END、CENTER、SPACE-INTERVE、SPACE-COMPAINE和SPAGE-EVENLAY。

justify-content: flex-start flex-end center space-between space-around space-evenly

对齐项目

Align-Items类似于JUSTUST-CONTENT ，但允许在交叉轴上对齐项目。它默认为拉伸，也接受伸缩起点、伸缩终点、中心和基线：

align-items: stretch flex-start flex-end center baseline

对齐-内容

Escreen-content类似于Escreen-items，但它只在有多行Flex项目时有效（请参阅下面的flex-wrap)。它默认为拉伸，也接受flex-start、flex-end、center、space-between、space-evenly：

align-content: stretch flex-start flex-end center space-between space-around space-evenly

弹性包装

默认情况下，项目不会换行(默认为nowrap)，因此如果项目占用的空间超过可用空间，它们将溢出。这可以通过将FLEX-WRAP设置为WRAP的值来修复：

flex-wrap: nowrap wrap

弹性项属性

对齐自我

Align-Self与Align-Items类似，但仅适用于特定项目。这使得可以很容易地拥有打破主要规则的灵活项目：

align-self: stretch flex-start flex-end center baseline

弹性增长

使用Flex-Growth，我们可以控制与其他项目相比，Flex项目所占用的空间量。Flex-Growth 接受一个数值，它表示可用空间的一小部分，具体取决于其他项的Flex-Growth值。它的缺省值为0，这意味着该项目不会占用可用的空闲空间。

由于它是基于比例的，例如，将所有项目设置为弹性增长200与将所有项目设置为弹性增长1相同。

在下面的示例中，第一个项目的默认弹性增长值为0，第二个项目的值为1，第三个项目的值为2：

flex-grow: 1

flex-grow: 2

伸缩

Flex-Shink是Flex-Growth 的反义词，它定义了项目的可缩放性。它的缺省值为1，这意味着项目可以缩小，就像Flex-Growth一样，它基于与其他项目的比例。

弹性基础

Flex-Basis定义了一个项目占用的起始空间，但这并不是保证，因为它还取决于空间的可用性或是否有额外的空间需要填充。

为了说明这一点，在下例中，所有项目的弹性基数均为25%：

...但现在让我们也为第一个弹性项赋予1的弹性增长。在以下示例中，所有项目的弹性基数都为25%，但第一个项目占用了剩余的可用空间，因为它的弹性增长值为1：

flex-grow:1

...最后，我们的第三个项目的弹性基数为77%，并且拒绝收缩以为弹性基数为25%的其他项目腾出空间，因为它的弹性-收缩 值为0：

flex-basis: 77%; flex-shrink:0;

1.item {
2  flex-basis: 25%;
3}
4.item:last-child {
5  flex-basis: 77%;
6  flex-shrink: 0;
7}

flex

Flex是Flex-Growth、Flex-Shink和Flex-Basis组合的速记属性。例如，下面是一个项目的语法，该项目的Flex-Growth值为2，FLEX-SHRING值为0，FLEX-BASE为2rem：

1.item {
2  flex: 2 0 2rem;
3}

CSS Flexbox 技巧表

简介