css3 flexbox_视觉指南CSS3 Flexbox属性

css3 flexbox

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Flexbox Layout正式称为CSS Flexible Box Layout Module，它是CSS3中的新布局模块，旨在提高容器中的项目对齐，方向和顺序，即使它们的尺寸是动态的甚至是未知的。 flex容器的主要特征是能够修改其子项的宽度或高度，以在不同屏幕尺寸上以最佳方式填充可用空间。

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.

许多设计人员和开发人员发现此flexbox布局更易于使用，因为元素的放置更简单，因此可以用更少的代码来实现更复杂的布局，从而简化开发过程。 Flexbox布局算法基于方向，这与基于垂直和水平的块或行内布局不同。 这种Flexbox布局应用于小型应用程序组件，而新的CSS网格布局模块正在出现，以处理大规模布局。

Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.

而不是解释flex属性的工作原理，本指南将重点关注flex属性如何以视觉方式影响布局。

基本 ( Basics )

Before we start with describing the flexbox properties, let’s give a little introduction of the flexbox model. The flex layout is constituted of parent container referred as flex container and its immediate children which are called flex items.

在开始描述flexbox属性之前，让我们先介绍一下flexbox模型。 flex布局由称为flex容器的父容器及其直接子代（称为flex项目）组成 。

In the box above you can see the properties and the terminology used to describe the flex container and its children. For more information on their meaning read the official flexbox model by W3C.

在上面的框中，您可以看到用于描述flex容器及其子代的属性和术语。 有关其含义的更多信息，请阅读W3C的官方flexbox模型 。

The flexbox layout went through many iterations and several syntax changes from its initial draft in 2009, so to avoid confusion and make everything clear we’ll use only the syntax from the last working draft (Sep 2014). If you need to maintain old browser compatibility you can read this article on how to do that in the best way.

自2009年起，flexbox布局经历了多次迭代和语法更改，因此，为了避免混淆并弄清楚一切，我们将仅使用上次工作草案（2014年9月）中的语法。 如果您需要保持旧的浏览器兼容性，则可以阅读本文 ，了解如何以最佳方式做到这一点。

The browser support for the latest flexbox specification is:

最新的flexbox规范的浏览器支持为：

• Chrome 29+
  Chrome29+
• Firefox 28+
  Firefox 28+
• Internet Explorer 11+
  Internet Explorer 11+
• Opera 17+
  歌剧17+
• Safari 6.1+ (prefixed with -webkit-)
  Safari浏览器6.1+（前缀-webkit- ）
• Android 4.4+
  Android 4.4以上
• iOS 7.1+ (prefixed with -webkit-)
  iOS 7.1以上版本（ -webkit-前缀）

You can see detailed browser support and compatibility here.

您可以在此处查看详细的浏览器支持和兼容性。

用法 ( Usage )

To use flexbox layout just set the display property on the parent HTML element:

要使用flexbox布局，只需在父HTML元素上设置display属性：

.flex-container {
  display: -webkit-flex; /_ Safari _/
  display: flex;
}

Or if you want to display it like an inline element use:

或者，如果您希望将其显示为嵌入式元素，请使用：

.flex-container {
  display: -webkit-inline-flex; /_ Safari _/
  display: inline-flex;
}

Note: This is the only property you need to set on the parent container and all its immediate children will become automatically flex items.

注意：这是您需要在父容器上设置的唯一属性，它的所有直接子容器将自动变为flex项目。

There are several ways to group the flexbox properties and by far the easiest way I’ve found to understand the flexbox options and their usage is to divide them in two groups one for the flex container and one for the flex items. Below are explained all of them and how they affect the layout visually.

有几种方法可以对flexbox属性进行分组，而到目前为止，我发现最容易理解flexbox选项的方法是将它们分为两组，一组用于flex容器，另一组用于flex项。 下面说明了所有这些内容以及它们如何在视觉上影响布局。

Flexbox容器属性 ( Flexbox container properties )

弹性方向 ( flex-direction )

This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or like columns vertically.

此属性通过设置弹性容器主轴的方向来指定弹性项目在弹性容器中的布局方式。 它们可以在两个主要方向上进行布局，例如水平行或垂直列。

Values:

值：

.flex-container {
  -webkit-flex-direction: row; /_ Safari _/
  flex-direction:         row;
}

With row direction the flex items are stacked in a row from left-to-right in ltr context

row方向上，弹性项目在ltr上下文中从左到右排成一行

.flex-container {
  -webkit-flex-direction: row-reverse; /_ Safari _/
  flex-direction:         row-reverse;
}

With row-reverse direction the flex items are stacked in a row from right-to-left in ltr context

row-reverse下，弹性项目在ltr上下文中从右到左排成一行

.flex-container {
  -webkit-flex-direction: column; /_ Safari _/
  flex-direction:         column;
}

With column direction the flex items are stacked in a column from top-to-bottom

在column方向上，柔性物品从上到下堆叠在一列中

.flex-container {
  -webkit-flex-direction: column-reverse; /_ Safari _/
  flex-direction:         column-reverse;
}

With column-reverse direction the flex items are stacked in a column from bottom-to-top

column-reverse排列时，柔性物料从下到上堆叠在一列中

Default value: row

默认值： row

Note: row and row-reverse are dependent of the writing mode so in rtl context they will be reversed respectively.

注意： row和row-reverse取决于写入模式，因此在rtl上下文中它们将分别被反转。

柔性包装 ( flex-wrap )

The initial flexbox concept is the container to set its items in one single line. The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.

最初的flexbox概念是在一行中设置其项目的容器。 flex-wrap属性控制flex容器是将其项目布置为单行还是多行，以及新行的堆叠方向。

Values:

值：

.flex-container{
  -webkit-flex-wrap: nowrap; /_ Safari _/
  flex-wrap:         nowrap;
}

Flex items are displayed in one row, by default they are shrunk to fit the flex container's width

Flex项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度

.flex-container {
  -webkit-flex-wrap: wrap; /_ Safari _/
  flex-wrap:         wrap;
}

Flex items are displayed in multiple rows if needed from left-to-right and top-to-bottom

如果需要，弹性项目从左到右和从上到下显示为多行

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /_ Safari _/
  flex-wrap:         wrap-reverse;
}

Flex items are displayed in multiple rows if needed from left-to-right and bottom-to-top

如果需要，从左到右和从下到上，弹性项目将显示在多行中

Default value: nowrap

默认值： nowrap

Note: These properties are dependent of the writing mode so in rtl context they will be reversed respectively.

注意：这些属性取决于写入模式，因此在rtl上下文中它们将分别反转。

柔性流 ( flex-flow )

This property is a shorthand for setting the flex-direction and flex-wrap properties.

此属性是设置flex-direction和flex-wrap属性的简写。

Values:

值：

.flex-container {
  -webkit-flex-flow:  || ; /_ Safari _/
  flex-flow:          || ;
}

Default value: row nowrap

默认值： row nowrap

证明内容 ( justify-content )

The justify-content property aligns flex items along the main axis of the current line of the flex container. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

justify-content属性将flex项目沿着flex容器当前行的主轴对齐。 当一行上的所有伸缩项目都不灵活或已达到最大大小时，它有助于分配剩余的可用空间。

Values:

值：

.flex-container {
  -webkit-justify-content: flex-start; /_ Safari _/
  justify-content:         flex-start;
}

Flex items are aligned to the left side of the flex container in ltr context

在ltr上下文中，弹性项目与弹性容器的左侧对齐

.flex-container {
  -webkit-justify-content: flex-end; /_ Safari _/
  justify-content:         flex-end;
}

Flex items are aligned to the right side of the flex container in ltr context

在ltr上下文中，弹性项目与弹性容器的右侧对齐

.flex-container {
  -webkit-justify-content: center; /_ Safari _/
  justify-content:         center;
}

Flex items are aligned at the center of the flex container

伸缩项目在伸缩容器的中心对齐

.flex-container {
  -webkit-justify-content: space-between; /_ Safari _/
  justify-content:         space-between;
}

Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container

Flex项目以相等的间距显示，第一个和最后一个Flex项目与flex容器的边缘对齐

.flex-container {
  -webkit-justify-content: space-around; /_ Safari _/
  justify-content:         space-around;
}

Flex items are displayed with equal spacing around every flex item, even the first and last flex items

弹性项目在每个弹性项目（甚至第一个和最后一个弹性项目）周围均以相等的间距显示

Default value: flex-start

默认值： flex-start

对齐项目 ( align-items )

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. This property sets the default alignment for all flex items, including the anonymous ones.

伸缩项可以在伸缩容器的当前行的横轴上对齐，类似于justify-content但在垂直方向上justify-content 。 此属性为所有弹性项目（包括匿名项目）设置默认对齐方式。

Values:

值：

.flex-container {
  -webkit-align-items: stretch; /_ Safari _/
  align-items:         stretch;
}

Flex items fill the whole height _(or width_)_ from cross start to cross end of the flex container_

从伸缩容器的交叉起点到交叉端点 ，伸缩项会填满整个高度_（或width _）_

.flex-container {
  -webkit-align-items: flex-start; /_ Safari _/
  align-items:         flex-start;
}

Flex items are stacked to the _cross start of the flex container_

伸缩项目被堆叠到伸缩容器的_ 交叉起始处_

.flex-container {
  -webkit-align-items: flex-end; /_ Safari _/
  align-items:         flex-end;
}

Flex items are stacked to the _cross end of the flex container_

伸缩项目堆叠到伸缩容器的_ 交叉端 _

.flex-container {
  -webkit-align-items: center; /_ Safari _/
  align-items:         center;
}

Flex items are stacked to the center of the _cross axis of the flex container_

伸缩商品堆叠到伸缩容器_ 横轴的中心_

.flex-container {
  -webkit-align-items: baseline; /_ Safari _/
  align-items:         baseline;
}

Flex items are aligned in a way that their baselines are aligned

调整弹性项目以使其基准对齐

Default value: stretch

默认值： stretch

Note: Read more details about how baselines are calculated here.

注意：请在此处阅读有关如何计算基线的更多详细信息。

对齐内容 ( align-content )

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

当横轴上有多余的空间时， align-content属性将伸缩容器内的线对齐在伸缩容器内，这与justify-content在主轴内对齐单个项目的方式类似。

Values:

值：

.flex-container {
  -webkit-align-content: stretch; /_ Safari _/
  align-content:         stretch;
}

Flex items are displayed with distributed space after every row of flex items

每行弹性项目之后，弹性项目都显示有分布的空间

.flex-container {
  -webkit-align-content: flex-start; /_ Safari _/
  align-content:         flex-start;
}

Flex items are stacked toward the _cross start of the flex container_

Flex项目朝着 flex容器的_ 交叉起始处堆叠_

.flex-container {
  -webkit-align-content: flex-end; /_ Safari _/
  align-content:         flex-end;
}

Flex items are stacked toward the _cross end of the flex container_

伸缩物品朝伸缩容器的_ 交叉端 _堆叠

.flex-container {
  -webkit-align-content: center; /_ Safari _/
  align-content:         center;
}

Rows of flex items are stacked in the center of the _cross axis of the flex container_

行的弹性项目堆叠在弹性容器_ 横轴的中心

.flex-container {
  -webkit-align-content: space-between; /_ Safari _/
  align-content:         space-between;
}

Rows of flex items are displayed with equal spacing between them, first and last rows are aligned to the edges of the flex container

行的flex项以相等的间距显示，第一行和最后一行与flex容器的边缘对齐

.flex-container {
  -webkit-align-content: space-around; /_ Safari _/
  align-content:         space-around;
}

Flex items are displayed with equal spacing around every row of flex items.

弹性项目在弹性项目的每一行周围均以相等的间距显示。

Default value: stretch

默认值： stretch

Note: This property has only effect when the flex container has multiple lines of flex items. If they are placed in single line this property has no effect on the layout.

注意：仅当flex容器具有多行flex项目时，此属性才有效。 如果将它们放在单行中，则此属性对布局没有影响。

弹性容器的注意事项 ( Note for flex containers )

• all of the column-* properties have no effect on a flex container.
  所有column-*属性都对flex容器无效。
• the ::first-line and ::first-letter pseudo-elements do not apply to flex containers.
  ::first-line和::first-letter伪元素不适用于flex容器。

Flexbox项目属性 ( Flexbox item properties )

订购 ( order )

The order property controls the order in which children of a flex container appear inside the flex container. By default they are ordered as initially added in the flex container.

order属性控制flex容器的子代出现在flex容器内的顺序。 默认情况下，它们的顺序与最初在flex容器中添加的顺序相同。

Values:

值：

.flex-item {
  -webkit-order: ; /_ Safari _/
  order:         ;
}

Flex items can be reordered with this simple property, without restructuring the HTML code

可以使用此简单属性对Flex项目进行重新排序，而无需重组HTML代码

Default value: 0

默认值： 0

弹性成长 ( flex-grow )

This property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

此属性指定伸缩增长因子，该因子确定在分配正的自由空间时，伸缩项目相对于伸缩容器中其余其余伸缩项目将增长多少。

Values:

值：

.flex-item {
  -webkit-flex-grow: ; /_ Safari _/
  flex-grow:         ;
}

If all flex items have same value for flex-grow than all items have same size in the container The second flex item takes up more space relative to the size of the other flex items

如果所有弹性项目的flex-grow值都与容器中所有弹性项目的大小相同，则 第二个弹性项目相对于其他弹性项目的大小占用更多空间

Default value: 0

默认值： 0

Note: Negative numbers are invalid.

注意：负数无效。

弯曲收缩 ( flex-shrink )

The flex-shrink specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

flex-shrink指定了flex收缩因子，它决定了当分配负自由空间时，flex项相对于flex容器中其余的flex项将收缩多少。

Values:

值：

.flex-item {
  -webkit-flex-shrink: ; /_ Safari _/
  flex-shrink:         ;
}

By default all flex items can be shrunk, but if we set it to 0 _(don't shrink_)_ they will maintain the original size_

默认情况下，所有伸缩项目都可以缩小，但是如果我们将其设置为0 _（请勿收缩），它们将保持原始大小

Default value: 1

默认值： 1

Note: Negative numbers are invalid.

注意：负数无效。

弹性基础 ( flex-basis )

This property takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

该属性采用与width和height属性相同的值，并在根据弹性系数分配自由空间之前指定弹性项目的初始主要尺寸。

Values:

值：

.flex-item {
  -webkit-flex-basis: auto | ; /_ Safari _/
  flex-basis:         auto | ;
}

flex-basis__\_ is specified for the 4th flex item and dictates the initial size of the element_

flex-basis __ \ _为第4个flex项目指定，并指定element_的初始大小

Default value: auto

默认值： auto

Note: There is a naming issue with the auto value which will be resolved in future.

注意： auto值存在命名问题 ，以后会解决。

柔性 ( flex )

This property is the shorthand for the flex-grow, flex-shrink and flex-basis properties. Among other values it also can be set to auto (1 1 auto) and none (0 0 auto).

该属性是flex-grow ， flex-shrink和flex-basis属性的简写。 除其他值外，还可以将其设置为auto （ 1 1 auto ）和none （ 0 0 auto ）。

.flex-item {
  -webkit-flex: none | auto | [  ? ||  ]; /_ Safari _/
  flex:         none | auto | [  ? ||  ];
}

Default value: 0 1 auto

默认值： 0 1 auto

Note: W3C encourages to use the flex shorthand rather than the separate component properties, as the shorthand correctly resets any unspecified components to accommodate common uses.

注意： W3C鼓励使用flex速记而不是单独的组件属性，因为该速记会正确地重置任何未指定的组件以适应常见用途 。

自我调整 ( align-self )

This align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. Refer to align-items explanation for flex container to understand the available values.

此align-self属性允许默认的对齐方式（或由align-items指定的align-items ）被单个弹性项目覆盖。 请参阅flex容器的 align-items解释以了解可用值。

Values:

值：

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /_ Safari _/
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

The 3rd and 4th flex items have overridden alignment through the align-self property

第3和第4个弹性项目通过align-self属性覆盖了align-self

Default value: auto

默认值： auto

Note: The value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent.

注意： align-self的auto值align-self计算为元素父级上align-items的值，如果元素没有父级，则将stretch 。

弹性物品注意事项 ( Note for flex items )

• float, clear and vertical-align have no effect on a flex item, and do not take it out-of-flow.
  float ， clear和vertical-align对flex项没有影响，也不要使它流出。

Flexbox游乐场 ( Flexbox playground )

Here's a flex playground where you can play with the different flex properties and explore the power of the flexbox layout. Combine several flex properties to get complex layouts.

这是一个flex游乐场，您可以在其中使用不同的flex属性，并探索flexbox布局的功能。 结合几个flex属性以获得复杂的布局。

See the Pen Flexbox Properties Demonstration by Dimitar (@justd) on CodePen.

见笔Flexbox的属性示范由贝尔巴托夫（ @justd ）上CodePen 。

You can also see it full page here or get the source code at GitHub.

您也可以在此处查看整页，或在GitHub上获取源代码。

翻译自: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

css3 flexbox