Image placeholder

CSS3 Flexbox 属性指南

Image placeholder
F2EX 2016-11-12

Flexbox布局被称为CSS弹性框布局,是CSS3中的新布局,用于改进容器中的对齐,方向和顺序,即使它们具有动态或未知的大小。柔性容器的主要特征是能够修改其子元素的宽度或高度以在不同的屏幕尺寸上以最佳可能的方式填充可用空间。

许多设计人员和开发人员发现这个flexbox布局更容易使用,因为元素的定位更简单,因此可以用更少的代码实现更复杂的布局,从而简化开发过程。 Flexbox布局算法是基于方向的,不同于基于垂直和水平的块或内联布局。这个flexbox布局应该用于小应用程序组件。

本文将关注flex属性如何以视觉方式影响布局。

基本

在我们开始描述flexbox属性之前,让我们稍微介绍一下flexbox模型。 flex布局由称为flex容器的父容器及其称为flex项的直接子元素组成。
css3-flexbox-model
在上图中,您可以看到用于描述flex容器及其子容器的属性和术语。 有关其意义的更多信息,阅读W3C的官方flexbox模型

Flexbox布局在2009年的初始草案中经历了很多次迭代和多次语法修改,为了避免混淆,并且使一切清晰,我们将只使用上一个工作草案(2014年9月)的语法。

最新flexbox规范的浏览器支持:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (prefixed with -webkit-)
  • Android 4.4+
  • iOS 7.1+ (prefixed with -webkit-)

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

用法

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


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

或者:


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

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

有几种方法来分组flexbox属性,目前为止我发现理解flexbox选项的最简单的方法,它们的用法是将它们分为两个组,一个用于flex容器,一个用于flex项。 下面解释所有这些,以及它们如何在视觉上影响布局。

Flexbox容器属性

flex-direction

此属性通过设置flex容器主轴的方向来指定flex容器如何布局在flex容器中。 它们可以在两个主要方向上布置,类似于水平的行或者垂直的列。

值:


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

对于行方向row,flex项在上下文中从左到右堆叠在一行中,如下图
flexbox-flex-direction-row


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

对于行反向方向row-reverse,flex项目在从右到左的一行中堆叠在上下文中,如下图
flexbox-flex-direction-row-reverse


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

对于列方向column,flex项目从顶部到底部堆叠在一列中,如下图
flexbox-flex-direction-column


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

使用列反向方向column-reverse,flex项目从底部到顶部堆叠在一列中,如下图
flexbox-flex-direction-column-reverse

默认值:row
注意:row和行反向row-reverse取决于写模式。

flex-wrap

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

值:


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

Flex项目显示在一行中,默认情况下它们会收缩以适应flex容器的宽度,如下图
flexbox-flex-wrap-nowrap


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

如果需要,Flex项目从左到右和从上到下显示在多行中,如下图
flexbox-flex-wrap-wrap


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

如果需要,Flex项目从左到右和从下到上显示在多行中,如下图
flexbox-flex-wrap-wrap-reverse

默认值:nowrap
注意:这些属性取决于写入模式。

flex-flow

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

值:


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

默认值:row nowrap

justify-content

justify-content属性沿着flex容器的当前行的主轴对齐flex项目。 当线上的所有flex项目都不灵活,或者灵活但已达到其最大大小时,它有助于分配左侧可用空间。

值:


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

Flex项目在上下文中与flex容器的左侧对齐,如下图
flexbox-justify-content-flex-start


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

Flex项目在上下文中与flex容器的右侧对齐,如下图
flexbox-justify-content-flex-end


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

Flex项目在flex容器的中心对齐,如下图
flexbox-justify-content-center


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

Flex项目以它们之间的相等间距显示,第一个和最后一个flex项目与flex容器的边缘对齐,如下图
flexbox-justify-content-space-between


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

Flex项目以等间隔显示在每个flex项目周围,即使是第一个和最后一个flex项目,如下图
flexbox-justify-content-space-around

默认值:flex-start

align-items

Flex项目可以在柔性容器的当前行的横轴上对齐,类似于对齐内容,但是在垂直方向上。 此属性为所有flex项(包括匿名项)设置默认对齐方式。

值:


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

Flex项填充从flex容器的交叉开始到交叉结束的整个高度(或宽度),如下图
flexbox-align-items-stretch


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

Flex项目被堆叠到flex容器的交叉开始,如下图
flexbox-align-items-flex-start


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

Flex项目被堆叠到flex容器的十字端,如下图
flexbox-align-items-flex-end


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

Flex项目堆叠到flex容器的横轴的中心,如下图
flexbox-align-items-center


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

Flex项目以它们的基线对齐的方式对齐,如下图
flexbox-align-items-baseline

默认值:stretch
注意:这里阅读有关如何计算基线的更多详细信息。

align-content

当在交叉轴中有额外的空间时,align-content属性对齐flex容器中的flex容器的线,类似于内容如何在主轴内对齐justify-content各个项目。

值:


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

Flex项目在每行Flex项目后面都显示分布式空间,如下图
flexbox-align-content-stretch


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

Flex项目朝向Flex容器的交叉开始堆叠,如下图
flexbox-align-content-flex-start


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

Flex项目朝向弹性容器的横向端部堆叠,如下图
flexbox-align-content-flex-end


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

弹性内容的行堆叠在弹性容器的横向轴线的中心,如下图
flexbox-align-content-center


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

以等间隔显示flex项目的行,第一行和最后一行与flex容器的边缘对齐,如下图
flexbox-align-content-space-between


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

Flex项目在Flex项目的每一行周围以相等的间隔显示,如下图
flexbox-align-content-space-around

默认值:stretch
注意:此属性仅在flex容器具有多行弹性项目时有效。 如果它们放置在单行中,则此属性对布局没有影响。

注意flex容器

  • 所有column- *属性对flex容器没有影响。
  • :: first-line:: first-letter伪元素不适用于flex容器。

Flexbox项属性

order

order属性控制flex容器的子容器在flex容器中的显示顺序。 默认情况下,它们作为最初在flex容器中添加的顺序排序。

值:


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

Flex项目可以使用这个简单的属性重新排序,而不必重新构建HTML代码,如下图
flexbox-order

默认值:0

flex-grow

此属性指定flex扩展,当分配空间空闲时,flex项目将相对于flex容器中的其余flex项目扩张多少。

值:


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

如果所有flex项目具有相同的flex-grow值,则所有项目在容器中具有相同的大小,如下图
flexbox-flex-grow-1

第二个flex项相对于其他flex项的大小占用更多空间,如下图
flexbox-flex-grow-2

默认值:0
注意:不能为负数。

flex-shrink

flex-shrink指定flex收缩,当分配自由空间不足时,flex容器相对于flex容器中其余flex项目收缩多少。

值:


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

默认情况下,所有flex项都可以收缩,但如果我们将它设置为0(不收缩),它们将保持原始大小,如下图
flexbox-flex-shrink

默认值:1
注意:不能为负数。

flex-basis

此属性与width和height属性具有相同的值,并在根据flex元素分配可用空间之前指定flex项目的初始主要大小。

值:


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

flex-basis为第4个flex项指定并指定元素的初始大小,如下图
flexbox-flex-basis

默认值:auto
注意:自动值有一个命名问题,将来会解决。

flex

这个属性是flex-growflex-shrinkflex-basis属性的缩写。 除了其他值,它也可以设置为auto1 1 auto)和none0 0 auto)。


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

默认值:0 1 auto
注意:W3C鼓励使用flex组合而不是单独的组件属性,因为组合正确地重置任何未指定的组件以适应常见用途。

align-self

这个align-self属性允许为单个flex项目覆盖默认对齐方式(或由align-items指定的对齐方式)。 请参阅flex容器的align-item说明以了解可用的值。

值:


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

第3和第4个flex项通过align-self属性覆盖了对齐,如下图
flexbox-align-self

默认值:auto
注意:auto的值为元素父项上的align-items的值,如果元素没有父项,则为stretch

Flex项目注意事项

  • floatclearvertical-align对flex项没有影响。

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


2021-06-05