flexbox布局
There are so many great CSS resources all over the internet. But what if you just want a simple layout and you want it NOW?
互联网上有很多很棒CSS资源。 但是，如果您只是想要一个简单的布局而现在就想要呢？
In this article, I describe the 5 most common web page layouts and how to build them using both Flexbox and Grid.
在本文中，我将介绍5种最常见的网页布局以及如何使用Flexbox和Grid来构建它们。
这将如何工作 (How this will work)
There is a link below every layout for the full HTML and CSS code on CodePen.
每个布局下方都有一个链接，用于CodePen上的完整HTML和CSS代码。
Note that I'm using SASS for composing style definitions, so if you want to do the same on your local, install SASS using:
请注意，我使用SASS来编写样式定义，因此，如果要在本地进行相同的操作，请使用以下命令安装SASS：
npm i sass -g基本卡模板 (Basic card template)
I used the above card as the base of the web page layout. It's composed of three elements in a vertical direction, so normal div blocks would work well. However, I will later need to make the middle element - the text paragraph - stretch.
我使用以上卡片作为网页布局的基础。 它由垂直方向上的三个元素组成，因此普通的div块会很好地工作。 但是，稍后我将需要拉伸中间元素(文本段落)。
Here both Flexbox and Grid do the job seamlessly. I prefer Flexbox as it's more straightforward to me.
在这里，Flexbox和Grid都能无缝地完成工作。 我更喜欢Flexbox，因为它对我来说更直接。
Winner: Flexbox
获奖者：Flexbox
Now let's start creating our different layouts.
现在开始创建不同的布局。
1垂直和水平居中卡 (1 Vertically and horizontally centered card)
With Flexbox, we need one element that centers horizontally, and another (the child element) that centers vertically.
使用Flexbox，我们需要一个元素水平居中，另一个(子元素)垂直居中。
The order of items is defined by flex-direction. How the element positions itself in the available space is set by align-self on the element or align-items on its parent.
项目的顺序由flex-direction定义。 元素如何在可用空间中定位自己是由元素上的align-self或其父元素上的align-items设置的。
With Grid, we need three columns and three rows. Then we position the card in the middle cell.
使用网格，我们需要三列三行。 然后，将卡放置在中间单元中。
The horizontal centering is easy. We define three columns and their sizes using grid-template-columns: auto 33% auto as the card should be as wide as 1/3 of the visible area.
水平居中很容易。 我们使用grid-template-columns: auto 33% auto定义三列及其大小grid-template-columns: auto 33% auto因为卡片的宽度应为可见区域的1/3。
The problem is, we don't know the vertical dimensions. We want the top and bottom rows to take up the remaining space which is not possible with grid. The card is centered, but its height depends on the height of the window.
问题是，我们不知道垂直尺寸。 我们希望最上面和最下面的行占用剩余空间，而网格是不可能的。 该卡居中，但其高度取决于窗口的高度。
However, we can solve this with an additional wrapping element around the card and center it using margin.
但是，我们可以通过在卡周围使用其他包装元素来解决此问题，并使用margin对其进行居中。
Winner: Flexbox
获奖者：Flexbox
2两张卡垂直和水平居中 (2 Two cards vertically and horizontally centered )
Often we need to center more than just one element. These two cards should also maintain the same height if one or the other contains longer text.
通常，我们需要将多个元素居中。 如果一个或另一个包含较长的文本，则这两个卡也应保持相同的高度。
With Flexbox, we need to wrap both cards in another element and use it to center both cards at once.
使用Flexbox，我们需要将两个卡包装在另一个元素中，并使用它一次将两个卡居中。
We can't use align-items here as that applies to the Y-axis in this case. We need to define how the remaining space on the X-axis should be distributed with justify-content: center. That ensures both cards are horizontally centered.
我们不能在这里使用align-items ，因为在这种情况下，它适用于Y轴。 我们需要定义如何使用justify-content: center分配X轴上的剩余空间。 这样可以确保两张卡都水平居中。
If we omit the variable height problem of Grid, we can achieve the same result even without any additional wrapping elements. This time we define grid with five columns with grid-template-columns: auto 33% 50px 33% auto. The rest stays the same as in the previous example.
如果省略Grid的可变高度问题，即使没有任何其他包装元素，我们也可以达到相同的结果。 这次，我们用五列的grid-template-columns: auto 33% 50px 33% auto定义了grid grid-template-columns: auto 33% 50px 33% auto 。 其余部分与前面的示例相同。
Winner: Flexbox
获奖者：Flexbox
3张相同宽度和高度的卡 (3 Multiple cards with same width and height)
This is another typical use case for blogs, e-commerce sites, or generally any site that displays some kind of listing. We want the cards to have the same width and height. Height needs to be inferred from the greatest element in the list.
这是博客，电子商务网站或通常显示某种列表的任何网站的另一个典型用例。 我们希望卡片具有相同的宽度和高度。 需要从列表中最大的元素推断出高度。
This can be done in Flexbox using flex-wrap: wrap. Elements will wrap to the next line if their width exceeds the remaining space of each line. However, the same height is only preserved in the scope of a single line, unless you define it explicitly.
这可以在Flexbox中完成 使用flex-wrap: wrap 。 如果元素的宽度超过每行的剩余空间，则它们将换行到下一行。 但是，除非明确定义，否则同一高度仅保留在单行范围内。
Grid shows its true power here. This layout can be created using grid-auto-rows: 1fr which enforces the same height on all rows.
格 在这里展示其真正的力量。 可以使用grid-auto-rows: 1fr创建此布局，它在所有行上强制使用相同的高度。
Winner: Grid
优胜者：网格
4垂直和水平居中交替显示文本和图像 (4 Alternating text and images vertically and horizontally centered)
In this example, we have text with CTA buttons accompanied by an image on the other side. Both components should be vertically centered, as their size can vary.
在此示例中，我们带有带有CTA按钮的文本，另一侧带有图像。 两个组件都应垂直居中，因为它们的大小可以变化。
This is a piece of cake for Flexbox. Every row is an article element split into two wrapping containers, .img and .content. They are required for even size distribution (flex-basis: 50%).
对于Flexbox来说，这是小菜一碟。 每行都是一个article元素，分为两个包装容器.img和.content 。 它们对于均匀的尺寸分布是必需的( flex-basis: 50% )。
Vertical centering of the inner content is defined by align-items: center.
内部内容的垂直居中由align-items: center定义。
The alternation is achieved by reversing the direction of Flexbox by flex-direction: row-reverse on every odd article.
交替是通过将flexbox的方向通过flex-direction: row-reverse在每个奇数文章上按flex-direction: row-reverse来实现的。
Grid handles this use-case nicely too. We don't need to define one giant grid, but rather one for each article.
格 也很好地处理了这个用例。 我们不需要定义一个巨型网格，而是为每篇article定义一个。
It defines equally wide columns that are vertically centered using align-items: center.
它定义了使用align-items: center垂直居中的等宽列。
The alternation is defined on the cell-level by switched values for grid-column.
交替是在单元格级别上通过grid-column切换值定义的。
Winner: tie
优胜者：并列
5个带菜单的水平接头 (5 Horizontal header with menu)
To achieve this design using Flexbox, both sides of the header need to be represented by a single element.
为了使用Flexbox实现此设计，标头的两侧都需要由单个元素表示。
The logo and company name form one anchor on the left, and the menu is a single nav element on the right. Flexbox positions them with justify-content: space-between.
徽标和公司名称在左侧形成一个anchor ，菜单在右侧是单个nav元素。 Flexbox将它们放置在justify-content: space-between 。
With Grid, we need two columns - one for the logo and the other for the menu. The menu is another grid that distributes the size of columns evenly using grid-template-columns: repeat(4, minmax(0, 1fr)).
对于Grid，我们需要两列-一列用于徽标，另一列用于菜单。 菜单是另一个网格，它使用grid-template-columns: repeat(4, minmax(0, 1fr)) columns均匀地分配列的大小grid-template-columns: repeat(4, minmax(0, 1fr)) 。
The problem here is that if we want to add another item to the menu, we also need to adjust the CSS.
这里的问题是，如果我们想在菜单中添加另一个项目，我们还需要调整CSS。
Winner: Flexbox
获奖者：Flexbox
最终获胜者是... (And the winner is...)
The final score is 5:2 in favor of Flexbox, but this does not mean that it becomes the ultimate CSS winner. There are situations when you need to use one or the other, sometimes even both together, to achieve what you need.
最终得分是Flexbox的5：2，但这并不意味着它成为最终CSS赢家。 在某些情况下，您需要使用一个或另一个(有时甚至同时使用)来实现所需的功能。
If you need flexible and conditional positioning, use Flexbox. If you want to create listings or similar structures that require equally sized elements or have a table form, use Grid.
如果需要灵活的条件定位，请使用Flexbox。 如果要创建需要相等大小的元素或具有表格形式的清单或类似结构，请使用网格。
As a front-end developer, you won't get away with not knowing both.
作为前端开发人员，您将不会一无所知。
Reference guide Flexbox, Reference guide Grid
P.S. If I missed a layout you use on a daily basis, let me know on Twitter and I'll prepare a sequel :-)
PS：如果我错过了您每天使用的版式，请在Twitter上告诉我，我将准备续集:-)
翻译自: https://www.freecodecamp.org/news/flexbox-vs-grid-how-to-build-the-most-common-html-layouts/
flexbox布局
扫一扫
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
