这篇翻译不完整。请帮忙从英语翻译这篇文章

在这个文档中,我们将看一些常见flexbox的用例—这些都是比其他布局更合理的方法。

为什么选择flexbox?

 

在浏览器完美支持的环境中,你选择使用flexbox的原因是你希望把一堆元素不是放在这个方向就是那个方向。 因为在放置元素过程中,你想控制元素在那个方向的维度,或者控制他们彼此之间的间距。flexbox就是为此设计的。. 又可以阅读Relationship of Flexbox to other layout methods来了解更多关于flexbox和CSS Grid布局的区别, 在这篇文章里面,我们会讨论flexbox如何运用与CSS整体布局。

 

在现实中,为了便于对齐,我们通常会选择用Flexbox作为替代品,来完成即使用Grid布局更好的情况。一旦盒子对齐(Box Alignment )被盒模型所实行,这种情况就会得到改善。在这个教程中,我们会介绍一些会在现在使用flexbox的用例。

导航

导航的一个常见特征,就是使用水平条的样式去呈现一系列元素。这一模式看起来很简单,但是在 flexbox 出现之前却是很难实现的。 它成为一个最简单的 flexbox 示例,可以被被看成是 flexbox 理想的使用场景。

当我们有一组元素需要水平排列展示,很可能在末尾会多出一些空间。我们需要决定如何去处理这些额外的空间,通常有多种不同的方案。 我们要么在元素外部展示这些空间即使用间距或包裹的方式来分隔开不同元素,要么将空间吸收至元素内部即需要一个方法来允许元素拉伸以占满额外空间。

在元素外部处理空间分布

为了让多余的空间分布在多个元素之间或周围,我们使用 flexbox 中相应的对齐属性以及 justify-content 属性。你可以通过 Aligning Items in a flex container 来阅读更多关于这个专门用来处理主轴(main axis)对齐的属性。

在下面的示例中,我们让各元素都展示为其自身的尺寸,通过使用 justify-content: space-between 使元素之间拥有相同的空间。你可以通过 space-around 的值来改变空间分布的方式,在浏览器支持的环境下还可以使用 space-evenly。你也可以使用 flex-start 让空间展示在所有元素末尾。使用 flex-end 让空间展示在所有元素之前,  center 可以剧中所有元素。

让元素自己处理空间分布

导航的另一个不同模式是让元素自己去决定如何处理额外的空间,而不是将空间分布在它们之间。 在这种情况下,我们使用 flex 属性来允许各元素彼此成比例的拉伸和收缩,正如 Controlling ratios of flex items along the main axis 所描述。

如果我想让导航中的所有元素都等宽,会使用 flex: auto,这是 flex: 1 1 auto 的简写形式。所有元素都在它们的 flex-basis 尺寸上进行自动的收缩。这意味着,较长的元素会获得更多的空间。因为 flex-basis 的值被设置为 0,所以所有空间都会被平均分配。

Split navigation

Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right.

Here we are using the auto margins technique described in Using auto margins for main axis alignment. The items are aligned on the main axis with flex-start as this is the initial behaviour of flexbox, and we are aligning the item on the right by giving it a left margin of auto. You can move the class from one item to another to change where the split happens.

Also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. Until the gap properties from the Box Alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items.

Center item

Before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox, as the following live example shows.

You can play with the alignment, aligning the item to the start with flex-start or end with flex-end.

In the future we may not need to make a container a flex container just to centre a single item, as the Box Alignment properties will ultimately be implemented in Block layout. For now however, if you need to properly centre one thing inside another, flexbox is the way to do it. As in the above example, make a container into a flex container, and then use either align-items on the parent element or target the flex item itself with align-self.

Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. This means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. Any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card.

Two card components showing that the internals of the component do not stretch with the wrapper.

Flexbox can solve this. We make the card a flex container, with flex-direction: column. We then set the content area to flex: 1, which is the shorthand for flex: 1 1 auto — the item can grow and shrink from a flex basis of auto. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the flex property from the live example you will see how the footer then moves up to sit directly under the content.

Media objects

The media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right. Ideally a media object should be able to be flipped — moving the image from left to right.

We see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions. With flexbox we can allow the part of the media object containing the image to take its sizing information from the image, and then the body of the media object flexes to take up the remaining space.

In the live example below you can see our media object. I have used the alignment properties to align the items on the cross axis to flex-start, and then set the .content flex item to flex: 1. As with our column layout card pattern above, using flex: 1 means this part of the card can grow.

Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

To prevent the image growing too large, add a max-width to the image. As that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a flex-basis of auto. Any width or max-width applied to the image will become the flex-basis.

.image img {
  max-width: 100px;
}

You could also allow both sides to grow and shrink in proportion. If you set both sides to flex: 1, they will grow and shrink from a flex-basis of 0, so you will end up with two equal-sized columns. You could either take the content as a guide and set both to flex: auto, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image.

.media .content {
  flex: 1;
  padding: 10px;
}

.image {
  flex: 1;
}

You could also give each side different flex-grow factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

.media .content {
  flex: 3;
  padding: 10px;
}

.image {
  flex: 1;
}

Flipping the media object

To switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

Form controls

Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an <input> element paired with a <button>, perhaps for a search form or where you simply want your visitor to enter an email address.

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I then use the flex properties to allow the <input> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.

You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.

Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.

Conclusion

While exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. Quite often you have more than one choice. Mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. It’s up to you. 

Think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it.

文档标签和贡献者

此页面的贡献者: devindwan, xieminjie
最后编辑者: devindwan,