弹性布局Flex终极指北（一）过去在 CSS 中布置元素是非常困难的事情，我们被迫使用烦人的 hacks（"技巧"或

过去在 CSS 中布置元素是非常困难的事情，我们被迫使用烦人的 hacks（"技巧"或 "补丁"），比如带有 clearfixes 的浮动元素，但当 flexbox 被创建之后，一切都得到了改变。在这篇文章中，将为大家分享什么是 flexbox ，如何使用它，以及你需要了解的所有高级内容。

ONE---什么是Flexbox?

Flexbox 是一种在 CSS 中布局元素的方式，分为两个主要组件，分别是弹性容器（flexbox container）和 弹性项目(flexbox items)。

flexbox 容器是包含所有 flexbox 项作为其子项的父元素。它是你定义所有关于 flexbox 布局属性的地方，你也可以对单个项目进行额外的调整。

让我们看一下如何实现一个简单的 flexbox 示例。如果我们有一个包含子元素的元素，我们需要做的就是将父元素的 display 属性设置为 flex，这样就会拥有一个 flex 容器。

1. display：flex

正如你在默认情况下看到的，当我们在元素上指定display:flex时，我们将该元素设置为 flex 容器。该元素中的所有直接子元素都被视为弹性项目。默认情况下，如果你未指定其他属性，则 flex 项目将从左到右排列在一行上，仅占用所需的空间。如果项目会溢出，它们也会自动缩小以适应 flex 容器。

这是 flexbox 的基础核心，它本身作用并不强，所以接下来我们需要讨论如何处理容器中项目的布局。

TWO---Flexbox 布局

Flexbox 是第一个与普通 CSS 完全不同方式工作的 CSS 布局方法。不用担心块/内联元素， flexbox 担心主轴和交叉轴。

默认情况下，主轴（以绿色显示）水平穿过容器，而横轴垂直。这意味着任何处理主轴的布局方法都会水平布局元素，而横轴会垂直布局元素。让我们先看看如何沿主轴布局元素。

一、justify-content (主轴/水平方向)

对于下方所有示例，我们将假设 flex-items 的宽度为 20%

.felx-item {
    width:20%;
}

1、flex-start（默认）

将所有项目放置在主轴的起点，默认情况下是轴的左侧。这也是 justify-content 的默认行为。

.flex-container {
    display:flex;
    justify-content:flex-start;
}

2、flex-end

将所有项目放置在主轴的末端，默认情况下是轴的右侧。

.flex-container {
    display:flex;
    justify-content:flex-end;
}

3、center(常用于水平居中)

将所有项目放置在主轴的中心。这是在 CSS 中居中元素的最简单方法之一。

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

3、space-between

这会占用容器内的所有额外空间，并将其均匀分布在每个元素之间，以在填充整个容器的同时将它们彼此间隔得尽可能远。

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

4、space-around

这与 space-between非常相似，但它也在容器外部和第一个/最后一个元素之间增加了空间。容器外部和第一个/最后一个元素之间的空间量正好是元素之间空间量的一半。

.flex-container {
    display:flex;
    justify-cnotent:space-around;
}

使用上方这些属性，可以轻松地沿主轴布置元素以满足任何需要。现在我们来谈谈如何在横轴上布置元素。

二、align-items (横轴/竖直方向)

对于下方这些示例，我们将假设 flex-items 的宽度均为 20%，但元素的高度都不同。

1、stretch（默认）

这将拉伸所有项目以填充横轴的整个高度，除非它们设置了特定的高度。在我们的示例中，我将第一个子元素的高度设置为初始值，这与我们从未在第一个孩子上设置高度基本相同。默认情况下，当 div 没有高度时，它只是其中内容的高度，但是正如你在下面看到的，第一个子项填充了容器的整个高度，因为它正在拉伸以填充整个高度。但是，第二个元素没有拉伸，因为我们在其上设置了 100px 的特定高度。stretch是 align-items 的默认行为。