css flexbox模型_CSS Flexbox的可视指南

css flexbox模型

by Zeeshaan Maudarbocus

通过Zeeshaan Maudarbocus

什么是CSS Flexbox？ (What is CSS Flexbox?)

As per the MDN web docs:

根据MDN网站文档：

“CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.”

“ CSS灵活框布局是CSS的模块，它定义了针对用户界面设计和一维项目布局优化CSS框模型。 在flex布局模型中，flex容器的子项可以在任何方向上进行布局，并且可以“伸缩”其大小，既可以增长以填充未使用的空间，也可以收缩以防止父项溢出。 儿童的水平和垂直对齐都可以轻松操纵。”

So to summarize, it is a layout module that makes things easier to align and distribute space among items in a container.

综上所述，它是一个布局模块，它使事情更容易在容器中的项目之间对齐和分配空间。

Let’s have a quick look at a few examples of what can be done with just a minimum of 1–2 lines of codes using CSS flexbox:

让我们快速看一下使用CSS flexbox只需最少1-2行代码即可完成的工作的一些示例：

Horizontal alignment layout:

水平对齐布局：

Vertical alignment layout:

垂直对齐布局：

It’s pretty cool given that just one or two lines of CSS were required to manipulate the layout inside each container.

考虑到只需要一两行CSS来操作每个容器内的布局，这非常酷。

基础 (The Basics)

Flexbox properties can be categorized into 2 main types:

Flexbox属性可以分为两种主要类型：

1. Container properties (flex-direction, flex-wrap, justify-content, align-items, align-content)

   容器属性 (伸缩方向，伸缩包装，对齐内容，对齐项，对齐内容)

2. Flex Item properties (order, flex, flex-grow, flex-shrink, align-self)

   弹性商品属性 (顺序，弹性，弹性增长，弹性收缩，自我对齐)

显示方式 (Display: flex)

The first property is not specific to flexbox. That property is display which we set to the value: flex . This is set on the container which contains the items we want to manipulate.

第一个属性并非特定于flexbox。 该属性将display ，我们将其设置为值： flex 。 这是在包含我们要操作的项目的容器上设置的。

Let’s add some visuals to understand how it works:

让我们添加一些视觉效果以了解其工作原理：

If we initially have a container, with 3 boxes ( div ) inside of it. This is how they will look like:

如果我们最初有一个容器，则其内部有3个框( div )。 这是它们的外观：

Now let’s add flex to the container:

现在，将flex添加到容器中：

Just one line of CSS has changed the layout from a vertical direction to a horizontal one.

仅一行CSS已将布局从垂直方向更改为水平方向。

Flexbox的重要术语 (Important Terminologies around Flexbox)

These terminologies will be used throughout this guide.

这些术语将在本指南中使用。

1. Flex Container: This refers to the container that has display: flex; set to it.

   Flex容器：这是指具有display: flex;的容器display: flex; 设置为它。

2. Flex Item: These are the individual children inside of the Flex Container

   Flex项目：这些是Flex容器中的各个子项

3. Main-axis: By default is set from left to right.

   主轴 ：默认设置为从左到右。

4. Cross-axis: By default is set from top to bottom.

   横轴 ：默认情况下从上到下设置。

As soon as display: flex is set on a container, these imaginary axes are going to work together to determine how the flex items inside of the flex container should move around and behave. These two axes change directions, whenever we change certain flexbox properties which are discussed below.

一旦在容器上设置了display: flex ，这些假想轴将一起工作，以确定flex容器内的flex项应如何移动和表现。 每当我们更改以下将讨论的某些flexbox属性时，这两个轴都会更改方向。

弹性方向 (Flex-direction)

This property determines the direction of the imaginary axes. The axes, in turn, determines how the items in the flex container should be placed. It takes the following 4 values:

此属性确定虚轴的方向。 轴又确定应如何放置flex容器中的项目。 它采用以下4个值：

1. row is the default value of the main axis which points from left to right. The cross-axis remains from top to bottom.

   row是主轴的默认值，从左到右指向。 横轴从上到下保持不变。

2. row-reverse reverses the direction of the row from right to left. Again, the cross-axis is left unaffected.

   row-reverse将row-reverse的方向从右向左反转。 同样，横轴不受影响。

3. column changes the main-axis from the horizontal axis to the vertical axis. Meaning that the main-axis is now flowing from top to bottom while the cross-axis now flows from left to right.

3. column将主轴从水平轴更改为垂直轴。 这意味着主轴现在从上到下流动，而横轴现在从左到右流动。

4. column-reverse is similar to the column value with the only difference being that the main-axis now flows from bottom to top.

4. column-reverse与column的值相似，唯一的区别是主轴现在从下到上流动。

柔性包装 (Flex-wrap)

The flex-container by default does not allow for items to take up several lines in a row. Instead, all of the items will be squished to fit into one row, that is, it does not allow for wrapping into several lines.

默认情况下，伸缩容器不允许项目连续占用多行。 取而代之的是，所有项目都将被压缩以适合一行，也就是说，不允许将其包装成多行。

1. flex-wrap: no-wrap is the default.

   flex-wrap: no-wrap默认为flex-wrap: no-wrap 。

2. flex-wrap: wrap . By changing that property to wrap, we can now ensure that each flex-item will keep their respective sizes. If they cannot fit on one line, they will wrap into a next row or column depending on the flex-direction.

2. flex-wrap: wrap 。 通过将该属性更改为wrap ，我们现在可以确保每个弹性项目都保持各自的大小。 如果它们不能排成一行，则它们将根据弯曲方向缠绕到下一行或下一列。

If the flex-direction has been set to row-reverse, then the items will go onto the next row starting from the right to the left.

如果将flex-direction设置为行反向，则该项将从右到左开始进入下一行。

3. wrap-reverse on the other hand will wrap the next row of flex items above the initial one, still from left to right.

3.另一方面， wrap-reverse会将弹性项目的下一行仍从左至右包装在初始项上方。

证明内容 (Justify-content)

This property is used very often. Its purpose is to distribute space between flex-items in a flex-container along the main axis. Its default value is set to flex-start .

此属性经常使用。 其目的是沿主轴在弹性容器中的弹性项目之间分配空间。 其默认值设置为flex-start 。

Remember: If flex-direction has been set to column, then the main-axis would now flow from top to bottom. Meaning that justify-content would now be distributing the items in a vertical fashion.

请记住：如果将flex-direction设置为column，那么主轴现在将从上到下流动。 这意味着证明内容现在将以垂直方式分发项目。

对齐项目 (Align-items)

This property is just as popular as justify-content and is used regularly with flexbox. It does the same thing as justify-content with the only difference being that it works along the cross-axis. The default value for align-items is stretch.

此属性与justify-content一样受欢迎，并且经常与flexbox一起使用。 它与justify-content具有相同的作用，唯一的区别是它沿横轴工作 。 align-items的默认值是stretch 。

Remember: If flex-direction has been set to column, then the cross-axis would now flow from left to right. Meaning that align-items would now be distributing the items in a horizontal fashion.

记住：如果将flex-direction设置为column，则横轴现在将从左到右流动。 这意味着align-items现在将以水平方式分发项目。

对齐内容 (Align-content)

This property is similar to and can be easily confused with align-items . The purpose of this property is to determine how space between rows in a flex-container should be distributed along the cross-axis.

此属性类似于align-items ，并且很容易与align-items混淆。 此属性的目的是确定应如何在flex容器中的行之间的空间沿横轴分布。

While align-items targets space between flex-items, align-content targets rows between the items. The default value for align-content is stretch.

align-items定位弹性项目之间的空间，而align-content定位项目之间的行。 align-content的默认值是stretch 。

弹性项目属性 (Flex Item Properties)

Time to move on to the second type of flexbox properties which allows us to target the individual items inside of a flex container.

是时候介绍第二种flexbox属性了，这使我们可以定位flex容器内的各个项目。

自我对齐 (Align-self)

This property allows you to align an individual flex item along the cross-axis. It overrides the alignment set to the container through align-items.

此属性使您可以沿横轴对齐单个弹性项目。 它通过align-items覆盖容器的对齐方式设置。

It also takes the same properties as align-items (see above).

它还具有与align-items相同的属性(请参见上文)。

订购 (Order)

This property allows us to re-order the positions of individual flex-items inside of their flex-container. By default, all items have a value of 0 assigned to them.

此属性使我们可以重新排列各个flex-item在其flex-container内部的位置。 默认情况下，所有项目的值均分配为0。

By assigning a value lower (-ve) or bigger (+ve) through order on the individual items, that specific item will move to be positioned according to their values.

通过按order在各个项目上分配一个较低(-ve)或较大(+ ve)的值，该特定项目将根据其值进行移动并定位。

The order will follow the most logical convention, that is -ve, 0, +ve. The lowest number will go to the far left and the biggest number to the far right, assuming that everything else is set as default. If there are items which haven’t been assigned any new value, they remain as 0.

该顺序将遵循最合乎逻辑的约定，即-ve，0，+ ve。 假定其他所有参数均设置为默认值，则最低编号将位于最左边，最大编号将位于最右边。 如果有些项目尚未分配任何新值，则它们仍为0。

Note: The boxes, 1, 2, 5 and 6 in the example above are all still at the default value of 0. To clarify, the six boxes above have the following values: -1, 0, 0, 0, 0, 1.

注意：上例中的1、2、5和6框均仍为默认值0。为清楚起见，以上六个框具有以下值：-1、0、0、0、0、1 。

If you want to place a box in front of box number 4, then you need to set your targeted box at an order of -2 or lower.

如果要将框放在4号框的前面，则需要将目标框的顺序设置为-2或更低。

弹性基础，弹性增长和弹性收缩 (Flex-basis, Flex-grow, and Flex-Shrink)

So far, all of the flex-items were equal in size. Let’s now look at how we can make a specific flex-item take up more space inside of a flex-container as compared to the other items inside of the same container.

到目前为止，所有弹性项目的大小都是相等的。 现在，让我们看一下如何使特定的flex-item与同一个容器内的其他项目相比，在flex-container内占用更多的空间。

弹性基础 (Flex-basis)

This property specifies the ideal size of a flex item before it is placed into a flex container. It works similarly to width when working with rows. It works like height when working with columns. So if we are working with columns, and an item has been given both height and flex-basis, the flex-basis will take priority as it is the ideal height that a flex-item will take if there is enough space available.

此属性指定将伸缩项目放入伸缩容器之前的理想大小。 当处理行时，它的作用类似于宽度。 使用列时，它的工作原理类似于高度。 因此，如果我们正在使用列，并且已为项目指定了高度和flex-basis，则flex-basis将被优先处理，因为如果有足够的可用空间，则它是flex-item将占据的理想高度。

That being said, if there is not enough space, and no height or width assigned to the items. The items will take the max-height or max-width available in the container.

就是说，如果没有足够的空间，也没有分配高度或宽度给项目。 这些项目将采用容器中可用的最大高度或最大宽度。

弹性成长 (Flex-grow)

This property determines how the flex-items can grow in order to fill in the unused space in a flex-container.

此属性确定flex-item如何增长以填充flex容器中未使用的空间。

If we assign a flex-grow: 1 to all boxes, they will all take the remaining space evenly which is also its default value. The number can be anything, as long as they are all the same number.

如果我们将flex-grow: 1分配给所有框，它们将全部平均分配剩余空间，这也是其默认值。 该数字可以是任何数字，只要它们都是相同的数字即可。

If we give flex-grow: 1 to one item and give a second one a flex-grow: 2 , then the second item will take two times as much unused space as compared to the first one.

如果我们将flex-grow: 1分配给一个项目，然后给第二个项目flex-grow: 2 ，则第二个项目将占用的空间是第一个项目的两倍。

This applies to both rows and columns.

这适用于行和列。

弯曲收缩 (Flex-shrink)

This property determines how the flex-items can shrink whenever there is not enough space in a flex-container.

此属性决定了只要伸缩容器中没有足够的空间，伸缩项目如何收缩。

The flex-shrink: 1 is the default value, meaning that all items will shrink at the same rate by default.

flex-shrink: 1默认值为flex-shrink: 1 ，表示默认情况下所有项目将以相同的速率收缩。

Note: flex-shrink: 0; means that this specific item should never shrink.

注意： flex-shrink: 0; 表示此特定项目永远不会缩小。

flex-shrink: 2; means that this specific item should shrink faster than the other ones at flex-shrink: 1;

flex-shrink: 2; 表示该特定项目在flex-shrink: 1;收缩速度应比其他项目快flex-shrink: 1;

柔性 (Flex)

This is the shorthand version for flex-grow, flex-shrink and flex-basis in that particular order.

这是该特定顺序的flex-grow，flex-shrink和flex-basis的简写版本。

If you need to use all of the three above, you could simply use something like this:

如果您需要使用以上所有三个，则可以简单地使用如下代码：

flex: 0 2 200px; where 0 refers to the flex-grow, 2 refers to flex-shrink and 200px refers to flex basis respectively.

flex: 0 2 200px; 其中0表示弹性增长，2表示弹性收缩，200px表示弹性基准。

恭喜你！ (Congratulations!)

That’s it! These are the key ingredients to becoming a flex master. And like for every other thing in life and in code, practice makes perfect. I highly recommend putting this guide into practice to get a practical understanding. One example could be to start with something small like a simple navigation bar.

而已！ 这些是成为Flex Master的关键要素。 就像生活和代码中的所有其他事情一样，实践可以使完美。 我强烈建议您将本指南付诸实践以获得实际的理解。 一个例子可能是从一些简单的导航栏开始。

You can also check out the link to my Codepen collection on flex-box which I used to create those flexboxes in the images above and tweak them to see how they change.

您还可以在弹性框上查看我的Codepen集合的链接，该链接是我用来在上面的图像中创建那些弹性框并对其进行调整以查看它们如何变化的。

Thank you for reading this guide on flexbox. I hope that it was helpful and informative. If you have any questions or want to share your thoughts on this topic, please feel free to reach out through the comments section or by email at maudarbocus.zeeshaan@gmail.com

感谢您在flexbox上阅读本指南。 我希望它会有所帮助并且提供有益信息。 如果您有任何疑问或想要分享有关此主题的想法，请随时通过评论部分或通过电子邮件发送至maudarbocus.zeeshaan@gmail.com

If you found this read valuable, please show this article some love, by leaving some claps behind, so that other developers can find it too.

如果您觉得这篇文章很有价值，请留下一些鼓掌，向本文表示一点爱，以便其他开发人员也可以找到。

ZeeshaanMaudar - OverviewCode for fun Code for a change Code for social good - ZeeshaanMaudargithub.com

ZeeshaanMaudar- 有趣的 概述 代码变革的代码社会公益的代码-ZeeshaanMaudar github.com

翻译自: https://www.freecodecamp.org/news/do-you-even-flex-box-c16449cfca96/

css flexbox模型