深度学习所需显存_只需10分钟即可学习基本的Flexbox

深度学习所需显存

by Justin Yek

贾斯汀·耶克(Justin Yek)

只需10分钟即可学习基本的Flexbox (Learn basic Flexbox in just 10 minutes)

什么是Flexbox？ (What is Flexbox?)

Flexbox, short for “flexible box,” is a layout mode introduced in CSS3 that determines how elements are arranged on a page so that they behave predictably under different screen sizes and devices.

Flexbox是“ flexible box”(柔性框)的缩写，是CSS3中引入的一种布局模式，可确定元素在页面上的排列方式，以便在不同的屏幕尺寸和设备下可预测地运行。

It is called Flexbox because of its ability to expand and shrink elements inside the the flex box to best fill the available space. Compared to older layout methods such as display table and floating inline blocks, Flexbox is a more powerful way to:

之所以称其为Flexbox，是因为它具有在Flex框内扩展和收缩元素以最佳填充可用空间的能力。 与显示表和浮动内联块等较旧的布局方法相比，Flexbox是一种更强大的方法：

• Lay out elements in different directions
  沿不同方向布置元素
• Rearrange the display order of elements
  重新排列元素的显示顺序
• Change the alignment of elements
  更改元素的对齐方式
• Dynamically fit elements into container
  动态将元素放入容器中

什么时候不使用Flexbox？ (When not to use Flexbox?)

While Flexbox is great for scaling, aligning and re-ordering elements, try to avoid using it for:

尽管Flexbox非常适合缩放，对齐和重新排序元素，但请尽量避免将其用于：

• overall page layout

  整体页面布局

• websites which fully support old browsers
  完全支持旧浏览器的网站

Older browsers, like IE 11 or below, do not support or only partially support Flexbox. If you want to play it safe, you should fall back to other CSS layout methods, such as display: inline-block with float and display: table. However, if you only target modern browsers, Flexbox is definitely worth a look.

较旧的浏览器(例如IE 11或更低版本)不支持Flexbox或仅部分支持Flexbox。 如果您想安全使用它，则应使用其他CSS布局方法，例如display: inline-block with float和display: table 。 但是，如果您仅针对现代浏览器，那么Flexbox绝对值得一看。

术语 (Terminology)

In the Flexbox model, there three core concepts:

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

• flex items, the elements that need to be laid out
  弹性项目，需要布置的要素
• flex container, which contains flex items
  flex容器，其中包含flex项
• flow direction, which determines the layout direction of flex items
  流向，确定伸缩项目的布局方向

Humans learn best from experience and examples, so let’s start!

人类可以从经验和示例中学到最好的东西，所以让我们开始吧！

1级-基本 (Level 1 — Basic)

1) Creating a flex container

1)创建一个伸缩容器

<div class="flex-container">    <div class="flex-item"></div>  <div class="flex-item"></div></div>

.flex-container {  display: flex;}

To create a flex container, you just need to add the display: flex property to an element. By default, all direct children are considered flex items and are laid out horizontally in a single row from left to right. If the total width of the flex items is larger than the container, the items will be scaled down so that they will fit into the container.

要创建Flex容器，只需要将display: flex属性添加到元素。 默认情况下，所有直接子级均被视为弹性项目，并从左到右水平排列在一行中。 如果弹性物品的总宽度大于容器的宽度，则物品将按比例缩小，以使其适合容器。

2) Put flex items in a single column

2)将弹性项目放在一栏中

.flex-container {  display: flex;  flex-direction: column;}

Flex items can be laid out vertically by setting flex-direction: column. It is also possible to lay them out in reverse order by setting flex-direction: column-reverse or flex-direction: row-reverse.

可以通过设置flex-direction: column垂直排列Flex项目。 也可以通过设置flex-direction: column-reverse或flex-direction: row-reverse以相反的顺序进行布局。

.flex-container {  display: flex;  flex-direction: column-reverse;}

第2级-初学者 (Level 2 — Beginner)

1) Align flex items to the right

1)将弹性项目向右对齐

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

Recall that there is flex direction for every Flexbox model. justify-contentis used to specify where the flex items should be placed along the flex direction. In the example above, justify-content: flex-end means items are justified to the end of the flex container in the horizontal direction. That’s why they are placed to the right.

回想一下，每种Flexbox型号都有挠性方向。 justify-content用于指定弹性项目应沿着弹性方向放置的位置。 在上面的示例中， justify-content: flex-end表示项目在水平方向上对齐到flex容器的末端。 因此，它们位于右侧。

2) Center-align flex items

2)中心对齐弹性项目

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

3) Spread out flex items

3)摊开弹性物品

You can specify how much space should appear between items in a container by using one of three possible spacing values for thejustify-contentproperty:

您可以使用justify-content属性的三个可能的间距值之一来指定容器中的项目之间应显示多少空间：

• space-evenly: the space between the starting edge of the container and the first item is equal to the spacing between each item and the item adjacent to it.

  space-evenly ：容器的起始边缘与第一个项目之间的距离等于每个项目与其相邻项目之间的距离。

• space-between: the space between any two adjacent items is the same, but not necessarily equal to the space between the first/last item and its closest edge; the space between the start edge and the first item is equal to the space between the end edge and the last item.

  space-between ：两个相邻项目space-between的空间相同，但不一定等于第一个/最后一个项目与其最近边缘之间的空间； 起始边缘和第一项之间的距离等于终止边缘和最后一项之间的距离。

• space-around: the space on each side of an item is the same for each item in the container. Note that the this means the space between two adjacent items will be twice as large as the space between the first/last item and its closest edge.

  space-around ：容器中每个项目的每侧空间都相同。 请注意，这意味着两个相邻项目之间的间隔将是第一个/最后一个项目与其最近边缘之间的间隔的两倍。

4) Align flex items in a second direction

4)在另一个方向上对齐弹性项目

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

Usually, we would like to lay out items along the flex direction while also aligning the items in the direction perpendicular to it. By setting justify-content: center and align-items: center, flex items can be placed at the center of flex container both horizontally and vertically.

通常，我们希望沿弯曲方向布置项目，同时还要在垂直于其方向上对齐项目。 通过设置justify-content: center和align-items: center ，可以将flex项目水平和垂直放置在flex容器的中心。

5) Align a particular flex item

5)对齐特定的弹性项目

.flex-container {  display: flex;  align-items: center;}

.flex-bottom {  align-self: flex-end;}

It is possible to align a particular flex item differently than the others in the container by using the align-self CSS property on that item.

通过在容器上使用align-self CSS属性，可以使特定的flex项目与容器中的flex项目不同。

3级—中级 (Level 3 — Intermediate)

1) Allow flex items to wrap into other rows/columns

1)允许弹性项目包装到其他行/列中

.flex-container {  display: flex;  flex-wrap: wrap;}

By default, flex items are not allowed to wrap and they are resized to fit into a single row or column if flex container is not large enough for all of them. By adding flex-wrap: wrap, flex items that would overflow the container will be wrapped into another row.

默认情况下，如果flex容器不足以容纳所有柔性物品，则不允许对其进行包装，并且将其调整大小以适合单个行或一列。 通过添加flex-wrap: wrap ，将使容器溢出的flex项目将被包装到另一行中。

2) Reverse wrapping

2)反向包装

.flex-container {  display: flex;  flex-wrap: wrap-reverse;}

Flex items are still laid out in multiple rows flex-wrap: wrap-reverse but they start from the end of flex container.

Flex项仍以多行方式进行flex-wrap: wrap-reverse但它们从flex容器的末尾开始。

3) Justify position of lines of elements

3)证明元素线的位置

.flex-container {  display: flex;  flex-wrap: wrap;  align-content: flex-start;}

By default, rows of flex items that wrapped are stretched to take up all remaining space with equal spacing between adjacent rows. You can set align-content on the flex container to determine the positioning of rows when wrapping occurs. Possible values are flex-start, flex-end, center, space-between, space-around and stretch(default).

默认情况下，包装的弹性项目的行将拉伸以占据所有剩余空间，相邻行之间的距离相等。 您可以在flex容器上设置align-content ，以在发生换行时确定行的位置。 可能的值为flex-start ， flex-end ， center ， space-between ， space-around和stretch (默认值)。

4级-高级 (Level 4 — Advanced)

1) Expand elements

1)展开元素

.flex-container {  display: flex;}

.flex-item.nth-of-type(1){  flex-grow: 1;}

.flex-item.nth-of-type(2) {  flex-grow: 2;}

flex-grow takes effect only when there is remaining space in the flex container. The flex-grow property of a flex item specifies how much an item will expand relative to the other items in order to fill the flex box. Default is 1. When set to 0, the item will not grow to fill remaining space at all. In this example, the ratio of two items is 1:2, meaning the first item will take up ⅓, while the second item will take ⅔ of the remaining space.

flex-grow仅在flex容器中有剩余空间时才生效。 弹性项目的flex-grow属性指定一个项目相对于其他项目将膨胀多少，以填充弹性框。 默认值为1。设置为0时，该项目将完全无法填充剩余空间。 在此示例中，两项的比例为1：2，这意味着第一项将占用1/3的空间，而第二项将占用剩余空间的1/3。

2) Shrink elements

2)收缩元素

.flex-container {  display: flex;}

.flex-item:nth-of-type(1) {  flex-shrink: 1;}

.flex-item:nth-of-type(2) {  flex-shrink: 2;}

flex-shrink only takes effect when the flex items overflow the flex container because of insufficient space. It specifies how much an item will shrink relative to the other items in order for the items to not overflow the flex box. Default is 1. When set to 0, the flex item will not shrink at all. In this example, the ratio is 1:2, meaning the first item will shrink by ⅓, while the second item will shrink by ⅔ of the overflowed space.

flex-shrink仅在flex项目由于空间不足而溢出flex容器时才生效。 它指定一个项目相对于其他项目将收缩多少，以使这些项目不会超出柔韧性框。 默认值为1。当设置为0时，flex项将完全不收缩。 在此示例中，该比率为1：2，这意味着第一项将缩小1/3，而第二项将缩小溢出空间的1/3。

3) Set the size of elements

3)设置元素的大小

.flex-container {  display: flex;}

.flex-item.nth-of-type(1) {  flex-basis: 200px;}

.flex-item.nth-of-type(2) {  flex-basis: 10%;}

Instead of using the initial size of an element, you can customize its size with flex-basis. By default, its value is flex-basis: auto, which means the size calculated from non-Flexbox CSS rules. You can also set it to some absolute value or a value that represents a percentage of the flex container; for example flex-basis: 200px and flex-basis: 10%.

您可以使用flex-basis定义元素的大小，而不必使用元素的初始大小。 默认情况下，其值为flex-basis: auto ，这表示从非Flexbox CSS规则计算得出的大小。 您也可以将其设置为某个绝对值或代表flex容器百分比的值； 例如flex-basis: 200px和flex-basis: 10% 。

4) Put flex-grow, flex-shrink, and flex-basis together

4)将弹性增长，弹性收缩和弹性基础放在一起

.flex-container {  display: flex;}

.flex-item:nth-of-type(1) {  flex: 1 0 100px;}

.flex-item:nth-of-type(2) {  flex: 2 0 10%;}

flex is a shorthand for flex-grow, flex-shrink and flex-basis. In this example, the first flex item is set to be flex-grow=1, flex-shrink=0, flex-basis=100pxand the second flex item is set to be flex-grow=2, flex-shrink=0, flex-basis=10%. In this case , since there is remaining space in the flex container, only flex-grow takes effects and flew-shrink is ignored.

flex是flex-grow ， flex-shrink和flex-basis的简写。 在此示例中，第一个弹性项目设置为 flex-grow=1 ， flex-shrink=0 ， flex-basis=100px ，第二个flex项目设置为 flex-grow=2 ， flex-shrink=0 ， flex-basis=10% 。 在这种情况下，由于flex容器中有剩余空间，因此只有flex-grow起作用并且忽略flew-shrink 。

结论 (Conclusion)

Flexbox is easy to learn and manipulate. Knowledge of its use is especially helpful since the web development cycle is short and iterations are rapid. If you’d like to experiment more with Flexbox before using it in your projects, you can visit Flexyboxes and Flexbox Froggy to practice. You can also read more on CSS trick: A guide to Flexbox and W3C: CSS Flexible Box.

Flexbox易于学习和操作。 由于Web开发周期短且迭代Swift，因此了解其用法特别有用。 如果要在项目中使用Flexbox之前对其进行更多试验，可以访问Flexyboxes和Flexbox Froggy进行练习。 您还可以阅读有关CSS技巧的更多信息：Flexbox和W3C 指南 ：CSS Flexible Box 。

This article was originally published on Altitude Labs’ blog and was written by our software engineer, Felix Yau. Altitude Labs is a software agency that specializes in personalized, mobile-first React apps.

本文最初发布在Altitude Labs的博客上 ，由我们的软件工程师Felix Yau撰写。 Altitude Labs是一家软件代理商，专门研究个性化，移动优先的React应用。

翻译自: https://www.freecodecamp.org/news/flexbox-in-10-minutes-7295497804ed/

深度学习所需显存