统软云 10分钟学习基本Flexbox布局

统软云 10分钟学习基本Flexbox布局

什么是Flexbox？

Flexbox是flexible box的缩写，意思是“柔性箱容器”。这是CSS3引入的一种新的布局模式。它决定了元素在页面上的排列方式，从而可以在不同的屏幕大小和设备下进行可预测的显示。

它被称为Flexbox，因为它可以扩展和收缩柔性容器中的元素，以最大化可用空间。与以前的布局方法（如表布局和浮动元素的嵌入块元素）相比，Flexbox是一种更强大的方法：

按不同方向排列元素

重新排列元素的显示顺序

更改图元的对齐方式

将元素动态加载到容器中

何时不建议使用Flexbox？

虽然Flexbox非常适合缩放、对齐和重新排序元素，但应避免以下情况：

整体页面布局

完全支持旧浏览器的网站

浏览器支持Flexbox：

较旧的浏览器，如IE 11或更早版本，不支持或仅部分支持Flexbox。如果您想安全地使用普通的页面呈现，您应该返回到其他CSS布局方法，例如display:inline块或display:table结合float。然而，如果您只针对现代浏览器，Flexbox绝对值得一试。

术语

在Flexbox模型中，有三个核心概念：

–柔性项目，要布置的元素

–柔性容器，包含柔性物品

–方向，确定弹性项的布局方向

最好的学习方法是从经验和例子中学习，所以让我们开始吧！

1级-基础

1） 创建柔性容器

要创建flex容器，只需向元素添加display:flex属性即可。默认情况下，所有直接子元素都被视为弹性项，并从左到右排列成一行。如果柔性项的总宽度大于容器，则将缩小柔性项，直到它们适合柔性容器的宽度。

2） 将弹性项排列到列中

您可以设置flex direction:列（在柔性容器中）以使柔性项目垂直布局。您还可以设置弹性方向：列反转或弹性方向：行反转，以按相反顺序排列弹性项。

2级-新手

1） 右对齐的弹性项

回想一下，每个Flexbox型号都有一个弯曲方向（主轴）。对齐内容用于指定弹性项在弹性方向上的对齐位置。在上面的示例中，justify content:flex end表示柔性项相对于柔性容器的末端水平对齐。这就是为什么他们在右边。

2） 居中的弹性项目

3） 轧制弹性件

您可以使用以下对齐内容属性的三个间距值之一指定容器中的弹性项之间应显示多少空间：

连续间隔：柔性容器的起始边缘与第一个柔性项目之间的间隔等于每个相邻柔性项目之间间隔。（作者注意：以前很少看到这个属性，因为浏览器以前不支持它，而Chrome在60版之后才支持它。要扩展它，请对齐content:space even也是这个逻辑。建议在Chrome 60下查看这个演示。）

间距：任意两个相邻柔性件之间的间距相同，但不一定等于第一个/最后一个柔性件与柔性容器边缘之间的间距；开始边缘和第一个项目之间的间距等于结束边缘和最后一个项目之间间距。

周围的空间：柔性容器中每个柔性项目的每一侧的间距相等。请注意，这意味着两个相邻柔性项之间的空间将是第一个/最后一个柔性项与其最近边缘之间的空间的两倍。

作者注：互联网上的图片可以更好地解释justify属性值的表现，如图所示：

4） 柔性项目在横轴上的对齐

通常，我们希望在柔性方向（主轴）上排列柔性项，并且我们还可以在垂直于它的方向（横轴）上对齐柔性项。通过设置对齐内容：居中和对齐项目：居中，可以将柔性项目水平和垂直放置在柔性容器的中心。

5） 对齐特定的弹性项

您可以在特定的flex项上使用align self CSS属性，以将特定的flex项目与容器中的其他flex项对齐。

3级-中级

1） 允许在多行/多列中排列灵活项

默认情况下，不允许在多行/多列中排列弹性项。如果柔性容器的大小不足以容纳所有柔性项，则将调整柔性项的大小以适合单行或列排列。

通过添加flex wrap：wrap，可以将溢出容器的flex项排列到另一行/列