CSS弹性盒子Flexbox布局详解

小咪咪 2022-07-28 11:00 216阅读 0赞

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

以下内容主要参考了：[Flex 布局教程：语法篇][Flex]

# 一、Flex布局是什么？ #

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。   
任何一个容器都可以指定为Flex布局。

.box{
      display: flex;
    }

行内元素也可以使用Flex布局。

.box{
      display: inline-flex;
    }

Webkit内核的浏览器，必须加上`-webkit`前缀。

.box{
      display: -webkit-flex; /* Safari，Chrome */
      display: flex;
    }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

## 1.1 基本概念 ##

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

![xs9F5JB.png][]

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。   
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。

# 二、Flex布局的好处 #

Flexbox通常能让我们更好的操作他的子元素布局，例如：

*  如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；   
    
    
     *  可以快速让他们布局在一列；
     *  可以方便让他们对齐容器的左、右、中间等；
     *  无需修改结构就可以改变他们的显示顺序；
     *  如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

# 三、Flex容器属性 #

除了display开启容器外，还有以下6个属性设置在容器上【老版本】。

1.  flex-direction： 主轴的方向（即项目的排列方向）。 【box-orient】
2.  flex-wrap： 如果一条轴线排不下，如何换行。 【box-lines】
3.  flex-flow： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.  justify-content： 项目在主轴上的对齐方式。【box-pack】
5.  align-items： 项目在交叉轴上如何对齐。【box-align】
6.  align-content： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

## 3.1 display ##

定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。

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

![5jbpeUF.jpg][]

开启Flex容器：让一个元素变成伸缩容器

![PJzLWHe.jpg][]

## 3.2 flex-direction 指定伸缩容器主轴的伸缩流方向 ##

这是用来创建方轴，从而定义Flex项目在Flex容器中放置的方向。Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列，要么是垂直列排列。

.container {
      flex-direction: row | row-reverse | column | column-reverse;
    }

![lzT29lD.jpg][]

*  row(默认值):如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列
 *  row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列
 *  column:和row类似，只不过方向是从上到下排列
 *  column-reverse:和row-reverse类似，只不过方向是从下向上排列

![U6EbYd0.jpg][]

## 3.3 flex-wrap 指定伸缩项目是否沿着侧轴排列 ##

默认情况之下，Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。方向在这也扮演了一个重要角度，决定新的一行堆放方向。

.container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

![HxkHSKy.jpg][]

*  nowrap(默认值):单行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列
 *  wrap:多行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列
 *  wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右向左排列，反之rtl，从左向右排列

![beavF3v.jpg][]

## 3.4 flex-flow(适用于flex容器元素) ##

这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是row nowrap（中间用空格隔开）。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

## 3.5 justify-content 主轴上对齐伸缩项目 ##

用于在主轴上对齐伸缩项目。这一行为会在所有可伸缩长度及所有自动边距均被解释后进行。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

.container {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

![UfyUJvX.jpg][]

*  flex-start(默认值):伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。
 *  flex-end:伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。
 *  center:伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。
 *  space-between:伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于flex-start。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。
 *  space-around:伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于center。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。

![KbySP1G.jpg][]

## 3.6 align-items 指定伸缩项目沿着侧轴对齐方式 ##

伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于justify-content属性，但是是另一个方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。

.container {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

![lDxsKBQ.jpg][]

*  flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
 *  flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
 *  center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
 *  baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
 *  stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

![faYErtx.jpg][]

## 3.7 align-content 多根轴线的对齐方式 ##

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。

请注意本属性在只有一行的伸缩容器上没有效果。

.container {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

![RIo7ONk.jpg][]

*  flex-start:各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。
 *  flex-end:各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。
 *  center:各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）
 *  space-between:各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于flex-start。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。
 *  space-around:各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于center。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。
 *  stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。

注意：只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。   
![qhZ996C.jpg][]

# 四、Flex项目属性 #

以下6个属性设置在项目上。

1.  order
2.  flex-grow
3.  flex-shrink
4.  flex-basis
5.  flex
6.  align-self

![BsLLBAw.jpg][]

## 4.1 order 项目流排列顺序 ##

默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。

.item {
      order: <integer>;
    }

![cR7aNtb.jpg][]

根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项目有相同的order值，这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序，也影响了后面的演算法如何处理各项目。   
![Y4OKACi.jpg][]

## 4.2 flex-grow Flex项目的扩大比例 ##

如果有必要的话，flex-grow可以定义一个Flex项目的扩大比例。它接受一个没有单位的值作为一个比例。它可以使用Flex项目完全占用Flex容器可用的空间。

如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。

.item {
      flex-grow: <number>; /* default 0 */
    }

![4qkBfZP.jpg][]   
注意：flex-grow取负值将失效。

## 4.3 flex-shrink Flex项目的缩小比例。 ##

如果有必要，flex-shrink可以定义Flex项目的缩小比例。

.item {
      flex-shrink: <number>; /* default 1 */
    }

![eD02SHL.jpg][]

注意：flex-shrink取负值将失效。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

## 4.4 flex-basis 项目占据的主轴空间 ##

flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。

.item {
      flex-basis: <length> | auto; /* default auto */
    }

如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下图所示：

![O0OWkzW.jpg][]

## 4.5 flex ##

flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。

.item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

建议您 使用此简写属性，而不是设置单独属性。注意，如果flex取值为none时，其相当于取值为0 0 auto。

请注意flex-grow与flex-basis的初始值与他们在flex缩写被省略时的 默认值不同。这里的设计是为了让flex缩写在最常见的情景下比较好用。

flex常见值

1.  `flex: 0 auto,flex: initial`与`flex: 0 1 auto`相同。（这也就是初始值。）根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小值。网页作者可以用对齐相关的属性以及margin属性的auto值控制伸缩项目沿着主轴的对齐方式。
2.  `flex: auto`与`flex: 1 1 auto`相同。根据width／height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间。如果所有项目均为`flex: auto、flex: initial`或`flex: none`，则在项目尺寸决定后，剩余的正空间会被平分给是flex: auto的项目。
3.  `flex: none`与`flex: 0 0 auto`相同。根据width／height属性决定元素的尺寸，但是完全不可伸缩。其效果与initial类似，但即使在空间不够而溢出的情况下，伸缩项目也不能收缩。
4.  `flex: <positive-number>`与`flex: 1 0px`相同。该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器里的所有项目都使用此模式，则它们的尺寸会正比于指定的伸缩比率。   
    ![UjUNsda.jpg][]

## 3.6 align-self ##

align-self则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同。）

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

![fMCqsgo.jpg][]

若伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果。

如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果该元素没有父元素，则计算值为stretch。对齐属性值的定义如下：

注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。

![ljxeRaV.jpg][]

flex 的行为是让盒子尽可能地填满一行，所以使用 flex 我们就有了让元素充满行的保障。但设置了 flex 的元素对 width 就不太买账了，于是要使用比它更严肃的 max-width 和 min-width 来设置。下面是效果：   
![这里写图片描述][20160413185352807]

在宽度足够时一行会显示更多元素，并且在确保元素尺寸在限制范围内的情况下尽可能地填满一行。下面是代码：

[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
[xs9F5JB.png]: http://i.imgur.com/xs9F5JB.png
[5jbpeUF.jpg]: http://i.imgur.com/5jbpeUF.jpg
[PJzLWHe.jpg]: http://i.imgur.com/PJzLWHe.jpg
[lzT29lD.jpg]: http://i.imgur.com/lzT29lD.jpg
[U6EbYd0.jpg]: http://i.imgur.com/U6EbYd0.jpg
[HxkHSKy.jpg]: http://i.imgur.com/HxkHSKy.jpg
[beavF3v.jpg]: http://i.imgur.com/beavF3v.jpg
[UfyUJvX.jpg]: http://i.imgur.com/UfyUJvX.jpg
[KbySP1G.jpg]: http://i.imgur.com/KbySP1G.jpg
[lDxsKBQ.jpg]: http://i.imgur.com/lDxsKBQ.jpg
[faYErtx.jpg]: http://i.imgur.com/faYErtx.jpg
[RIo7ONk.jpg]: http://i.imgur.com/RIo7ONk.jpg
[qhZ996C.jpg]: http://i.imgur.com/qhZ996C.jpg
[BsLLBAw.jpg]: http://i.imgur.com/BsLLBAw.jpg
[cR7aNtb.jpg]: http://i.imgur.com/cR7aNtb.jpg
[Y4OKACi.jpg]: http://i.imgur.com/Y4OKACi.jpg
[4qkBfZP.jpg]: http://i.imgur.com/4qkBfZP.jpg
[eD02SHL.jpg]: http://i.imgur.com/eD02SHL.jpg
[O0OWkzW.jpg]: http://i.imgur.com/O0OWkzW.jpg
[UjUNsda.jpg]: http://i.imgur.com/UjUNsda.jpg
[fMCqsgo.jpg]: http://i.imgur.com/fMCqsgo.jpg
[ljxeRaV.jpg]: http://i.imgur.com/ljxeRaV.jpg
[20160413185352807]: /images/20220724/750f25e5b5b04a2780be920bd0855d4f.png