flexbox垂直居中_Flexbox设计者指南，第2部分：走向垂直

flexbox垂直居中

As I’ve shown previously, flexbox is a powerful CSS layout engine. One of its many advantages is the fact that a horizontal flexbox layout can be displayed vertically with a single line of CSS code, with elements rearranged in any order you wish. This makes flexbox perfectly suited to modern responsive design, where layouts are commonly re-oriented for smaller screens. In this article I’ll look at more of the powerful options this creates for designers.

如前所述， flexbox是强大的CSS布局引擎。 它的许多优点之一是，可以用一行CSS代码垂直显示水平flexbox布局，并且可以按照您希望的任何顺序重新排列元素。 这使得flexbox非常适合现代响应式设计 ，在该设计中 ，布局通常会针对较小的屏幕进行重新定向。 在本文中，我将介绍为设计师创建的更多强大功能。

Let’s take a simple arrangement of shapes:

让我们简单地安排形状：

<div id="triangle"></div>
	<div id="square"></div>
	<div id="circle"></div>
</figure><figure>

Shaped with the following CSS:

用以下CSS塑造：

#flex {
	display: flex;
	padding: 2rem;
}
#triangle {
	width: 0; height: 0;
	border-bottom: 114px solid hsl(240, 30%, 50%);
	border-left: 63px solid transparent;
	border-right: 63px solid transparent; 
}
#square-vert {
	width: 126px; height: 126px;
	background: hsl(300, 30%, 50%); 
}
#circle-vert { 
	width: 126px; height: 126px;
	border-radius: 50%;
	background: hsl(340, 30%, 50%); 
}

By default, the elements are arranged along a horizontal axis. To change that, we just need a simple declaration:

默认情况下，元素沿水平轴排列。 要更改它，我们只需要一个简单的声明：

#flex { flex-direction: column; }

…which produces the display you can see at the left in the banner image.

…产生的显示您可以在横幅图像的左侧看到。

Note that the elements are arranged “top down” by default, and aligned to the left. All the properties I discussed in the previous article can be applied here: it’s just that the context is now vertical, rather than horizontal.

请注意，默认情况下，元素从上到下排列，并向左对齐。 我在上一篇文章中讨论的所有属性都可以在这里应用：只是上下文现在是垂直的 ，而不是水平的。

Placing the elements at the “end” of the flexbox container is easy, so long as the container itself is tall enough to show visible realignment of its children. At the same time, we can align the elements horizontally and reverse their order:

将元素放置在flexbox容器的“端”很容易，只要容器本身足够高以显示其子级的可见对齐即可。 同时，我们可以水平对齐元素并颠倒其顺序：

#flex { 
	height: 500px;
	justify-content: flex-end;
	flex-direction: column-reverse;
	align-items: center;
}

…which produces the stack to the right.

…产生右边的堆叠。

Combining both horizontal and vertical flexbox alignment finally provides web designers with true, honest-to-goodness perfect centering of elements, one of the techniques shown in my “Seven Ways To Center With CSS” article.

最后，将水平和垂直flexbox对齐方式结合起来，最终可以为Web设计人员提供真正，诚实至善的完美元素居中，这是我在“ CSS居中的七种方法 ”一文中展示的技术之一。

移动基本Flexbox (Basic Flexbox For Mobile)

Switching a layout between larger and smaller screens becomes very easy with flexbox. Given this pseudo-code:

使用flexbox在大屏幕和小屏幕之间切换布局变得非常容易。 给出以下伪代码：

<header></header>
	<div id="wrapper">
		<nav></nav>
		<main></main>
	</div>
<footer></footer>

We can switch the arrangement of the <nav> and <main> elements between side-by-side:

我们可以在<nav>和<main>元素之间并排切换：

div#wrapper { display: flex; }

To one above the other at smaller viewport sizes:

以较小的视口大小在另一个上方：

@media (max-width: 400px;) {
	div#wrapper {
		flex-direction: column;
	} 
}

There’s much more that we can do with flexbox, as I’ll show in upcoming articles.

正如我将在以后的文章中展示的那样，我们可以使用flexbox做更多的事情。

翻译自: https://thenewcode.com/787/A-Designers-Guide-To-Flexbox-Part-2-Going-Vertical

flexbox垂直居中