flexbox布局_使用Flexbox创建灵活的布局

缺乏、安全感 2022-12-03 01:40 95阅读 0赞

flexbox布局

*The following introduction to Flexbox is an extract from Tiffany’s new book, [CSS Master, 2nd Edition][CSS Master_ 2nd Edition].*

*以下对Flexbox的介绍摘自Tiffany的新书[CSS Master，第二版][CSS Master_ 2nd Edition] 。*

**Before [CSS Grid][] came along, there was Flexbox (which is officially known as the [CSS Flexible Box Layout Module][]). Flexbox was designed to manage layout in one direction—a row (`flex-direction: row` or `row-reverse`) *or* a column (`flex-direction: column` or `column-reverse`). That’s in contrast to Grid, which accounts for rows *and* columns.**

**在[CSS Grid][]出现之前，有Flexbox(正式称为[CSS Flexible Box Layout Module][] )。** **Flexbox旨在管理一个方向上的布局-行( `flex-direction: row`或`row-reverse` ) *或*列( `flex-direction: column`或`column-reverse` )。** **这与网格不同，网格占行*和*列。**

A basic flexible box layout is simple to create: add `display: flex` or `display: inline-flex` to the containing element. These values for `display` will trigger a *flex formatting context* for that containing element’s children. As with Grid, both `flex` and `inline-flex` are inside display modes. We set these values on the container, which behaves like a block-level or inline-level box, respectively. The children of that container are then arranged according to the rules of flex layout.

基本的灵活框布局易于创建：将`display: flex`或`display: inline-flex`到包含元素。 这些用于`display`值将触发包含元素的子元素的*flex格式化上下文* 。 与Grid一样， `flex`和`inline-flex`都在显示模式内。 我们在容器上设置这些值，其行为分别类似于块级或嵌入式级框。 然后根据伸缩布局的规则安排该容器的子级。

*Note: Older versions of Blink-based browsers such as Chrome (≤ 28), and WebKit-based browsers like Safari (≤ 8), require a vendor prefix. If your project still supports those browsers, you’ll need to use `display: -webkit-flex` or `display: -webkit-inline-flex`. Older versions of Firefox (≤ 21) also require a prefix. Use `-moz-flex` and `-moz-inline-flex` to support those browsers.*

*注意：较旧版本的基于Blink的浏览器，例如Chrome(≤28)和基于WebKit的浏览器，例如Safari(≤8)，都需要供应商前缀。* *如果您的项目仍支持这些浏览器，则需要使用`display: -webkit-flex`或`display: -webkit-inline-flex` 。* *较早版本的Firefox(≤21)也需要前缀。* *使用`-moz-flex`和`-moz-inline-flex`支持这些浏览器。*

By adding `display: flex` or `display: inline-flex` to a containing element, its immediate children become flex items, as shown in the image below. Flex items may be element children or non-empty text nodes. For instance, the markup below generates three flex item boxes that each behave according to the rules of flex layout:

通过将`display: flex`或`display: inline-flex`到包含元素，其直接子元素将成为flex项目，如下图所示。 弹性项目可以是元素子项或非空文本节点。 例如，下面的标记会生成三个弹性项目框，每个弹性项目框都按照弹性布局的规则运行：

<div style="display: flex">
        <span>This text is contained by a SPAN element.</span>
        <b>This text is contained by a B element.</b>
        This text node is still a flex item.
    </div>

If no other properties are set, each flex item will have the same height as its tallest element (as determined by content). It will also stack horizontally (or vertically when the document has a vertical writing mode) without wrapping, and with no space between the edges of each box. Flex items may overflow the container.

如果未设置其他属性，则每个flex项目将具有与其最高元素相同的高度(由内容确定)。 它还将水平堆叠(或在文档具有垂直书写模式时垂直堆叠)，而无需包裹，并且每个框的边缘之间没有间距。 柔性物品可能会使容器溢出。

![A list with display: flex applied to the ul containing element][A list with display_ flex applied to the ul containing element]A list with

`display: flex` applied to the `ul` containing element

`display: flex`列表 `display: flex`应用于 `ul`包含元素

This may not seem like such a big deal, but it simplifies the code necessary for a range of user interface patterns. Let’s look at a couple of examples.

这似乎没什么大不了的，但是它简化了一系列用户界面模式所需的代码。 让我们看几个例子。

## 新的媒体对象组件 **(**A New Media Object Component**)** ##

Take the following media object code:

采取以下媒体对象代码：

<div class="media__object">
        <img src="video-thumb1.jpg">
        <div class="media__object__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>

Before Flexbox, we might have paired the preceding markup with the following CSS:

在Flexbox之前，我们可能已将前面的标记与以下CSS配对：

.media__object img {
        float: left;
        height: auto;
        width: 150px;
    }
    .media__object__text {
        padding-left: 170px;
    }
    /* Let's use the clearfix hack! */
    .media__object::after{
        content: ' ';
        display: block;
        clear: both;
    }

This layout works, but it has one major drawback: it requires us to constrain the width of our images so that we know how much padding to use. That limits our ability to use this same component in multiple contexts. You may want an image 150px wide when this component is used for a “Related Stories” widget, and one that’s only 75px wide for comments.

这种布局是可行的，但是它有一个主要缺点：它要求我们限制图像的宽度，以便我们知道要使用多少填充。 这限制了我们在多种情况下使用相同组件的能力。 当此组件用于“相关故事”小部件时，您可能需要一张150像素宽的图像，而注释则只有75像素宽。

Let’s try this using Flexbox. Here’s our updated CSS:

让我们使用Flexbox尝试一下。 这是我们更新CSS：

.media__object {
        display: flex;
    }
    .media_object img {
        margin-right: 20px;
    }

That’s a lot less CSS. An added bonus is that we don’t have to worry about how wide or tall our image is. Nor do we have to concern ourselves with clearing floats. Whether the image is 200px wide or 20px wide, `.media__object__text` will abut the margin box of our `img` element.

CSS少了很多。 另外一个好处是，我们不必担心图像的宽度或高度。 我们也不必担心清理浮子。 无论图像的宽度是`.media__object__text`像素还是20像素， `.media__object__text`都将紧靠`img`元素的空白框。

## 使用`flex`创建灵活的表单组件 **(**Creating Flexible Form Components with `flex`**)** ##

Another use case for Flexbox is creating flexible, vertically aligned form components. Consider the interface pattern shown in the image below.

Flexbox的另一个用例是创建灵活的，垂直对齐的表单组件。 考虑下图所示的接口模式。

![A form field with an adjacent button][]A form field with an adjacent button 带有相邻按钮的表单域

Here, we have a form input control and an adjacent button. Both are vertically aligned, and our button is 150px wide.

在这里，我们有一个表单输入控件和一个相邻的按钮。 两者都是垂直对齐的，我们的按钮为150px宽。

What if we want our `input` element to expand to fill the available space in its container? Without Flexbox, we’d need some JavaScript and hand-waving to update the width of `input` in response to changes in the width of its parent. With Flexbox, however, we can just use `flex`.

如果我们希望`input`元素扩展以填充其容器中的可用空间怎么办？ 没有Flexbox，我们需要一些JavaScript和手工操作来更新`input`的宽度，以响应其父级宽度的变化。 但是，使用Flexbox，我们只能使用`flex` 。

The `flex` property is actually shorthand for three other properties.

`flex`属性实际上是其他三个属性的简写。

*  `flex-grow` indicates that an element should grow if necessary and must be a positive integer. Its initial value is `0`.
    
    `flex-grow`表示元素在必要时应增长，并且必须为正整数。 其初始值为`0` 。
 *  `flex-shrink` indicates that an element should shrink if necessary and must be a positive integer. Its initial value is `1`.
    
    `flex-shrink`表示元素在必要时应缩小，并且必须为正整数。 其初始值为`1` 。
 *  `flex-basis:` indicates the initial or minimum width (when the flex axis is horizontal) or the height of an element (when it’s vertical). It may be a length or percentage, or `auto`, and its initial value is `auto`.
    
    `flex-basis:`表示初始宽度或最小宽度(当弯曲轴为水平时)或元素的高度(当垂直时)。 它可以是长度或百分比，也可以是`auto` ，其初始值为`auto` 。

Though it’s possible to set each of these individually, the specification strongly recommends using the `flex` shorthand. Here’s an example:

尽管可以单独设置每个选项，但规范强烈建议使用`flex`速记。 这是一个例子：

div {
        display: flex;
    }
    input[type="text"], button {
        border: 0;
        font: inherit;
    }
    input[type="text"] {
        flex: 1 0 auto;   
    }
    button {
        background: #003;
        color: whitesmoke;
        display: block;
        text-align: center;
        flex: 0 0 150px;
    }

Here, we’ve used `flex: 1 0 auto` for our `input` element. Since its `flex-grow` value is `1`, it will grow to fill the available space of its parent. For the `button` element, however, we’ve used `flex: 0 0 150px`. The `0` values for `flex-grow` and `flex-shrink` prevent the width of the button from increasing or decreasing, while the `flex-basis` value of `150px` sets its width.

在这里，我们使用了`flex: 1 0 auto`作为`input`元素。 由于其`flex-grow`值为`1` ，它将增长以填充其父级的可用空间。 但是，对于`button`元素，我们使用了`flex: 0 0 150px` 。 `flex-grow`和`flex-shrink`的`0`值阻止按钮的宽度增加或减少，而`150px`的`flex-basis`值设置按钮的宽度。

As you can see in the image below, our button remains the same size, but the width of `input` expands to fill the remaining space.

如您在下图中所看到的，我们的按钮保持不变，但是`input`的宽度会扩展以填充剩余的空间。

![The effect of flex: 0 0 150px][The effect of flex_ 0 0 150px]The effect of

`flex: 0 0 150px`

`flex: 0 0 150px`的效果 `flex: 0 0 150px`

The tricky bit about `flex-grow` and `flex-shrink` values is that they’re proportional. Yes, `flex: 1 0 auto` means our `input` element will be wider than our button. But changing the value of our button’s `flex` property to `flex: 1 0 auto` doesn’t necessarily mean that both elements will have the same size, as shown in the following image.

关于`flex-grow`和`flex-shrink`值的棘手问题是它们是成比例的。 是的， `flex: 1 0 auto`意味着我们的`input`元素将比我们的按钮宽。 但是将按钮的`flex`属性的值更改为`flex: 1 0 auto`并不一定意味着两个元素的大小都相同，如下图所示。

![Both items have the same flex value but are still different sizes][]Both items have the same flex value but are still different sizes 这两个项目具有相同的柔韧性值，但尺寸仍然不同

Instead, flex items will be resized to fill the container, taking their used `min-width` and `max-width` values into account (which may be their initial values).

取而代之的是，将调整弹性项目的大小以填充容器，同时考虑其使用的`min-width`和`max-width`值(可能是它们的初始值)。

Unfortunately, we can’t use `fr` units with the `flex` or `flex-basis` properties. Use length or percentage values instead.

不幸的是，我们不能使用带有`flex`或`flex-basis`属性的`fr`单位。 请改用长度或百分比值。

## Flexbox垂直居中 **(**Vertical Centering with Flexbox**)** ##

Finally, let’s take a look at how to vertically center content with Flexbox. Vertically centering elements is one of the more difficult tasks to achieve with CSS, particularly if the height of your content is unknown. But with Flexbox, we require just one additional line of CSS—`align-items: center`:

最后，让我们看一下如何使用Flexbox将内容垂直居中。 垂直居中元素是CSS难以完成的任务之一，尤其是在内容高度未知的情况下。 但是使用Flexbox，我们只需要增加一行CSS代码即可： `align-items: center` ：

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

Now our flex items and their contents are vertically centered within the flex container, as shown in the image below.

现在，我们的伸缩项目及其内容在伸缩容器内垂直居中，如下图所示。

![Distributing flex items with align-items: center][Distributing flex items with align-items_ center]Distributing flex items with

`align-items: center`

`align-items: center`分配弹性 `align-items: center`

## 使用Flexbox创建类似网格的布局 **(**Creating Grid-like Layouts with Flexbox**)** ##

In most cases, you’ll want to use Grid to create grid-like layouts. However, you may find yourself wanting boxes that align when there’s an even number of items, but expand to fill the available space when there’s an odd number.

在大多数情况下，您将希望使用Grid创建类似网格的布局。 但是，您可能会希望自己的框在有偶数个时对齐，而在有奇数个时会扩大以填充可用空间。

![A grid-like layout with expanding cells][]A grid-like layout with expanding cells 具有扩展单元格的网格状布局

Here’s the markup we’ll use:

这是我们将使用的标记：

By default, flex items don’t wrap. To achieve the layout above, we’ll need to make them wrap using the `flex-wrap` property. It accepts three values: `nowrap` (the inital value), `wrap`, and `wrap-reverse`. We’ll use `wrap` here:

默认情况下，弹性项目不包装。 为了实现上面的布局，我们需要使用`flex-wrap`属性将它们包装。 它接受三个值： `nowrap` (初始值)， `wrap`和`wrap-reverse` 。 我们将在此处使用`wrap` ：

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

Now we just need to indicate how our flex items should behave, and what their maximum width should be. Since we want a maximum of four columns, we’ll set our `flex-basis` value to `25%`. And since we want our flex items to expand to fill the available space, we’ll set `flex-grow` to 1. We’ll keep `flex-shrink` at 0 so that our boxes never occupy less than 25% of their container:

现在，我们只需要指出弹性项目的行为方式以及最大宽度即可。 由于我们最多需要四列，因此我们将`flex-basis`值设置为`25%` 。 并且由于我们希望伸缩项目扩展以填充可用空间，因此我们将`flex-grow`设置为1。我们将`flex-shrink`保持为0，以便我们的盒子永远不会占据其容器的25％以下：

.flex-aligned li {
        flex: 1 0 25%;
    }

## 了解有关Flexbox的更多信息 **(**Learning More about Flexbox**)** ##

There’s a lot more to Flexbox than what we’ve covered here. CSS-Tricks’ “[A Complete Guide to Flexbox][]” digs into all the properties and values. You can also check out Philip Walton’s “[Solved by Flexbox][]”, which showcases UI patterns that are made easier with Flexbox.

除了我们在此介绍的内容以外，Flexbox还有很多其他功能。 CSS-Tricks的“ [Flexbox完整指南][A Complete Guide to Flexbox] ”深入研究了所有属性和值。 您还可以查看Philip Walton的“ [Flexbox解决的方法][Solved by Flexbox] ”，它展示了使用Flexbox变得更加容易的UI模式。

## 选择`flex`或`grid` **(**Choosing `flex` or `grid`**)** ##

As you develop page or component layouts, you may find yourself wondering when it’s better to use Flexbox and when to use Grid.

在开发页面或组件布局时，您可能会想知道何时使用Flexbox更好，何时使用Grid。

*  Use Grid when you want to arrange elements into rows *and* columns that align both horizontally and vertically.
    
    当您要将元素排列成水平和垂直对齐的行*和*列时，请使用“网格”。
 *  Use Flexbox when you want to arrange items in a row *or* a column, when you wish to align items vertically or horizontally, but not both.
    
    当您想将项目排列成一行*或*一列，希望垂直或水平对齐项目时(而不是两者都对齐)，请使用Flexbox。

Jen Simmons’ video “[Flexbox vs. CSS Grid — Which is Better?][Flexbox vs. CSS Grid _ Which is Better]” walks you through some things to consider when choosing between Grid and Flexbox. Rachel Andrew’s “[Should I use Grid or Flexbox?][Should I use Grid or Flexbox]” is another great resource for understanding both.

詹·西蒙斯(Jen Simmons)的视频“ [Flexbox vs. CSS Grid —哪个更好？][Flexbox vs. CSS Grid _ Which is Better] ”将引导您完成在Grid和Flexbox之间进行选择时要考虑的一些事项。 Rachel Andrew的“ [我应该使用Grid还是Flexbox？][Should I use Grid or Flexbox] ”是了解两者的又一绝妙资源。

In practice, your projects will probably mix both of these techniques, as well as floats. For instance, you may use Grid to define the overall page layout, while using Flexbox for your navigation menu or search box, and floats to place tables or images.

实际上，您的项目可能会同时使用这两种技术以及浮动技术。 例如，您可以使用Grid定义整体页面布局，而将Flexbox用作导航菜单或搜索框，然后浮动以放置表格或图像。

> 翻译自: [https://www.sitepoint.com/creating-flexible-layouts-with-flexbox/][https_www.sitepoint.com_creating-flexible-layouts-with-flexbox]

flexbox布局

[CSS Master_ 2nd Edition]: https://www.sitepoint.com/premium/l/css-master2
[CSS Grid]: https://www.sitepoint.com/creating-css-grid-layouts/
[CSS Flexible Box Layout Module]: https://www.w3.org/TR/css-flexbox-1/
[A list with display_ flex applied to the ul containing element]: /images/20221123/fbf39e2065a74c41b2e8041292161f73.png
[A form field with an adjacent button]: /images/20221123/380ed031d2a24b59990f123a114d1637.png
[The effect of flex_ 0 0 150px]: /images/20221123/48ebdc4fc8a249dcaa74a1e09415e5bb.png
[Both items have the same flex value but are still different sizes]: /images/20221123/55fd502bbffc425dbb1cbea986363ad6.png
[Distributing flex items with align-items_ center]: /images/20221123/6c456d950c4a496996a67ecc8e3328c5.png
[A grid-like layout with expanding cells]: /images/20221123/f1491055eae24f6d82399b4b4da6ff41.png
[A Complete Guide to Flexbox]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[Solved by Flexbox]: http://philipwalton.github.io/solved-by-flexbox/
[Flexbox vs. CSS Grid _ Which is Better]: https://www.youtube.com/watch?v=hs3piaN4b5I
[Should I use Grid or Flexbox]: https://www.rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
[https_www.sitepoint.com_creating-flexible-layouts-with-flexbox]: https://www.sitepoint.com/creating-flexible-layouts-with-flexbox/