什么是 CSS 弹性框？

CSS 灵活布局框，俗称Flexbox ，是一种强大的一维布局模型。它有助于在容器（父级）内有效地放置、对齐和分配项目（子级）。

重要特点：

• 一维布局模型： Flex 是一种一维布局模型，因为它只能将项目水平处理为行或垂直处理为列。相反，CSS Grid 布局可以同时处理行和列。
• 创建灵活且响应迅速的布局：Flexbox 使 flex 容器能够根据不同的屏幕尺寸自定义其中的项目。弹性容器可以扩展其子项以填充可用空间，也可以缩小它们以防止溢出。
• 与方向无关：与 Block（垂直偏置）和 Inline（水平偏置）不同，Flexbox 不受任何方向约束。
• 超级好用：在 Flexbox 中对齐项目很容易，不像使用浮动和定位有点令人沮丧，有时很难使用。

弹性盒架构：

Flexbox 有两个方面： Flex 容器和Flex 项目

弹性项目可以沿主轴（从主起点开始，在主终点结束）或交叉轴（从交叉起点开始，在交叉终点结束）布置。

• 主轴： Flex 项目沿此轴布置，根据 flex-direction 水平或垂直。
• 交叉轴：垂直于主轴，其方向取决于主轴的方向。
• 主要尺寸：它是弹性项目的宽度/高度，取决于主要尺寸。
• 交叉尺寸：它是弹性项目的宽度/高度，取决于交叉尺寸。

为了理解不同的 Flexbox 属性，让我们通过创建一个 HTML 文件和一个 CSS 文件来举个例子。

例子：

HTML

  

    
    
    
    
     

  

    

        
1
        
2
        
3
        
4
    

  

这是我们的 CSS 代码，我们将在其中设置 flex-container 和 flex-item 的样式。

CSS

.container {
  border: 5px solid rgb(0, 0, 0);
  background-color: rgb(245 197 221);
}
.item {
  border: 5px solid rgb(0, 0, 0);
  background-color: rgb(141, 178, 226);
  margin: 10px;
  padding: 20px;
  height: 100px;
  width: 100px;
  font-weight: bold;
  font-size: 45px;
}

输出：

从上面的输出来看，项目默认是垂直对齐的，默认显示是块级的。粉色区域是容器，其中的蓝色框是物品。

Parent/Flex 容器的属性：

• 显示：让我们通过在 CSS 文件的 .container 中将其显示设置为 flex 来使容器弯曲。

.container{
    display: flex;
    border: 5px solid rgb(0, 0, 0);
    background-color: rgb(245 197 221);
}

例子：

HTML

  

    
    
    
    
    

  

    

        
1
        
2
        
3
        
4
    

  

输出：如您所见，应用display: flex属性后，项目已水平对齐，因为 flexbox 的默认 flex-direction 是行。

显示：弹性

• flex-direction ：它设置 flex 容器主轴的方向，并指定项目将如何放置在容器内。

句法：

flex-direction: attribute value

属性值：

• 行： Flex 项目沿一行水平显示。
• column： Flex 项目沿列垂直显示。
• 行反转： Flex 项目沿行水平显示，但顺序相反。
• column reverse： Flex 项目沿列垂直显示，但顺序相反。

注意：默认显示方向为行。

例子：

HTML

  

    
    
    
    
     

  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
    
    

        

            
1
        
        

            
2
  
        
        

            
3
        
        

            
4
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 5px;
  padding: 0;
  float: left;
  height: 270px;
  width: 170px;
  border: 2px solid black;
  display: flex;
}
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column-reverse {
  flex-direction: column-reverse;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  height: 40px;
  width: 40px;
  margin: 2px;
  padding: 2px;
  font-weight: bold;
  border: 2px solid black;
}

输出：

行、列、行反转、列反转

• flex-wrap ：它指定 flex 容器是单行还是多行。

句法：

flex-wrap: attribute value

属性值：

• nowrap （默认）：它指定 flex 项目将不换行，并将在单行中布局。它可能会导致 flex 容器溢出。
• wrap：它指定弹性项目将在必要时换行，并以多行布局。
• wrap-reverse：与 wrap 相同，但在这种情况下，flex 项目将以相反的顺序进行换行。
• 初始值：它表示指定为属性初始值的值。
• 继承：它表示元素父级属性的计算值。

注意：我们增加了容器内的项目数量，以更好地理解 flex-wrap 效果。

例子：

HTML

  

    
    
    
    
     

  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
        

            
6
        
        

            
7
        
        

            
8
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
        

            
6
        
        

            
7
        
        

            
8
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
        

            
6
        
        

            
7
        
        

            
8
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 5px;
  padding: 0;
  float: left;
  width: 250px;
  border: 2px solid black;
  display: flex;
}
.no-wrap {
  flex-wrap: nowrap;
}
.wrap {
  flex-wrap: wrap;
}
.wrap-reverse {
  flex-wrap: wrap-reverse;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  height: 40px;
  width: 40px;
  margin: 2px;
  padding: 2px;
  font-weight: bold;
  border: 2px solid black;
}

输出：

nowrap, 换行, 换行

• flex-flow ：它是 flex-direction 和 flex-wrap 的简写。默认情况下，flex-direction 是row ，而 flex-wrap 是nowrap。

句法：

flex-flow: flex-direction flex-wrap

例如，我们可以将 flex-direction 指定为一行，将 flex-wrap 指定为一个换行。

.container{
flex-flow: row wrap;
}

换行

• justify-content ：它定义了项目如何沿着当前行的主轴/主轴定位。

句法：

justify-content: attribute value

属性值：

• flex-start（默认）： Flex 项目位于容器的开头。
• flex-end： Flex 项目位于容器的末端。
• center： Flex 项目位于容器的中心。
• space-between：弹性项目以均匀间距分布，第一个项目将在容器的开头，最后一个项目将在容器的末尾。
• space-around：弹性项目以均匀的间距分布，在第一个项目的开头和最后一个项目的末尾有一半的空间。
• space-evenly： Flex 项目沿主轴均匀分布在对齐容器内。
• 初始值：它表示指定为属性初始值的值。

例子：

HTML

  

    
    
    
    
     

  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
  
        
        

            
4
        
        

            
5
  
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 5px;
  padding: 0;
  border: 2px solid black;
  display: flex;
}
.flexStart {
  justify-content: flex-start;
}
.flexEnd {
  justify-content: flex-end;
}
.center {
  justify-content: center;
}
.spaceBetween {
  justify-content: space-between;
}
.spaceAround {
  justify-content: space-around;
}
.spaceEvenly {
  justify-content: space-evenly;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  width: 50px;
  height: 50px;
  margin: 5px;
  line-height: 10px;
  font-weight: bold;
  border: 2px solid black;
}

输出：

flex-start, flex-end, center, space between, space-around, space-evenly

• align-content ：当横轴有多余空间时，align-content 对齐容器内的多行。它类似于 justify-content 对齐主轴内的各个项目。

注意：该属性仅在 Flexbox 有多行时有效。

句法：

align-content: attribute value

属性值：

• flex-start：行对齐到容器的开头。
• flex-end：行对齐到容器的末端。
• center：线条与容器的中心对齐。
• space-between：行均匀分布，第一项位于容器的开头，最后一项位于容器的末尾。
• space-around：行均匀分布，在第一个项目的开头和最后一个项目的末尾有一半的空间。
• 拉伸（默认）：线拉伸以占用剩余空间。

例子：

HTML

  

    
    
    
    
    

  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
  
        
        

            
2
  
        
        

            
3
        
        

            
4
  
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
  
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 5px;
  float: left;
  height: 500px;
  width: 50px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.flexStart {
  align-content: flex-start;
}
.flexEnd {
  align-content: flex-end;
}
.center {
  align-content: center;
}
.spaceBetween {
  align-content: space-between;
}
.spaceAround {
  align-content: space-around;
}
.stretch {
  align-content: stretch;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  width: 50px;
  margin: 5px;
  line-height: 10px;
  font-weight: bold;
  border: 2px solid black;
}

输出：

flex-start、flex-end、center、space-between、space-around、stretch

• align-items ：它定义了弹性项目如何沿着容器当前行的横轴对齐。

句法：

align-items: stretch|center|flex-start|flex-end|baseline|initial|
inherit;

属性值：

• flex-start：项目沿交叉起始线对齐。
• flex-end：项目沿交叉线对齐。
• center：项目在横轴上居中。
• 基线：项目在一行中对齐，使得它们的基线对齐。
• 拉伸（默认）：项目拉伸以填充容器。

例子：

HTML

  

    
    
    
    
     

  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

           
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    
    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 5px;
  float: left;
  height: 300px;
  width: 150px;
  border: 2px solid black;
  display: flex;
  flex-direction: row;
}
.flexStart {
  align-items: flex-start;
}
.flexEnd {
  align-items: flex-end;
}
.center {
  align-items: center;
}
.baseline {
  align-items: baseline;
}
.stretch {
  align-items: stretch;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  width: 50px;
  line-height: 10px;
  font-weight: bold;
  border: 2px solid black;
}

输出：

flex-start ，flex-end，中心，基线，拉伸

详细区别请参考align-content 和 align-items的区别一文。

子项/弹性项的属性：

• order：它指定 flex 容器的子项在 flex 容器中出现的顺序。

句法：

order: 

弹性项目的默认顺序值为 0。这就是为什么分配了大于 0 的值的项目出现在未设置值的项目之后。反过来适用于值小于 0 的项目，它们出现在默认订单值或订单值大于 0 的项目之前。

例子：

HTML

  

    
    
    
    
     
  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 0;
  padding: 0;
  float: left;
  height: 200px;
  width: 400px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  border: 2px solid black;
}
.item-1 {
  order: 3;
}
.item-4 {
  order: -3;
}

输出：由于项目 1 的订单为 3，因此其订单高于每个项目的订单，因此将其放在最后，将项目 4 放在开头，因为它的订单 (-3) 是其他项目中最低的订单。

flex ：它指定灵活长度的组件，它是以下的简写属性：

• flex-grow ：它指定该项目与该容器内的其他项目相比将增长多少。
• flex-shrink ：它指定与该容器内的其他项目相比，该项目将缩小多少。
• flex-basis ：它指定灵活项的初始大小。

句法：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

例子：

HTML

  

    
    
    
    
     
  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 0;
  padding: 0;
  height: 500px;
  border: 2px solid black;
  display: flex;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  border: 2px solid black;
}
.item-1 {
  flex: 0 1 auto;
}
.item-2 {
  flex: 2 2 auto;
}
.item-3 {
  flex: 0 1 auto;
}
.item-4 {
  flex: 0 1 auto;
}
.item-5 {
  flex: 0 1 auto;
}

输出：我们可以清楚地看到，具有最高 flex-grow 和 flex-shrink 值的 item 2 扩展和收缩最多。它的 flex-grow 值和 shrinks 值都为 2，而其他项的 flex-grow 和 flex-shrink 值分别为 0 和 1。所有项目的 flex-basis 已设置为 auto。

• flex-grow：它设置一个弹性项目的 flex-grow 属性并定义它的增长能力。默认的 flex-grow 值为 0。

句法：

flex-grow:  

注意：负数无效。

例子：

HTML

  

    
    
    
    
     
  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 0;
  padding: 0;
  height: 250px;
  border: 2px solid black;
  display: flex;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  border: 2px solid black;
}
.item-1 {
  flex-grow: 0;
}
.item-2 {
  flex-grow: 2;
}
.item-3 {
  flex-grow: 0;
}
.item-4 {
  flex-grow: 0;
}
.item-5 {
  flex-grow: 0;
}

输出：我们可以清楚地看到，具有 flex-grow 值的 item 2 比其他 item 扩展得更多。

• flex-shrink：它为弹性项目设置 flex-shrink 属性并定义弹性项目的收缩能力。默认的 flex-grow 值为 1。

句法：

flex-shrink:  

注意：负数无效。

例子：

HTML

  

    
    
    
    
     
  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  margin: 0;
  padding: 0;
  height: 250px;
  border: 2px solid black;
  display: flex;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  border: 2px solid black;
}
.item-1 {
  flex-shrink: 1;
}
.item-2 {
  flex-shrink: 2;
}
.item-3 {
  flex-shrink: 1;
}
.item-4 {
  flex-shrink: 1;
}
.item-5 {
  flex-shrink: 1;
}

输出：我们可以清楚地看到，具有 flex-shrink 值的项目 2 比其他项目收缩得更多。

• flex-basis：它定义了一个弹性项目的初始大小。

句法：

flex-basis: content | <'width'>

例子：

HTML

  

    
    
    
    
     
  

    

        

            
px
        
        

            
percentage
        
        

            
auto
        
        

            
initial
        
        

            
inherit
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  padding: 0;
  margin: 0;
  height: 250px;
  border: 2px solid black;
  
  display: flex;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  border: 2px solid black;
}
.px {
  flex-basis: 50px;
}
.percentage {
  flex-basis: 75%;
}
.auto {
  flex-basis: auto;
}
.initial {
  flex-basis: initial;
}
.inherit {
  flex-basis: inherit;
}

输出：

• align-self ：它定义了单个弹性项目如何沿横轴对齐。

句法：

align-self: auto|stretch|center|flex-start|flex-end|baseline|
initial|inherit;

属性值：

• flex-start：在容器的开头对齐项目。
• flex-end：对齐容器末端的项目。
• center：在容器的中心对齐项目。
• 拉伸：对齐项目以适应容器。
• 基线：将项目与容器的基线对齐。
• auto（默认）： Item 继承父容器的 align-items 属性。
• 初始值：设置为默认值。
• 继承：项目从其父元素继承 align-self 属性。

例子：

HTML

  

    
    
    
    
     
  

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
        

            
5
        
    

  

CSS 代码：

CSS

.container {
  background-color: rgb(245 197 221);
  padding: 0;
  margin: 0;
  height: 250px;
  border: 2px solid black;
  display: flex;
}
ul {
  list-style: none;
}
.item {
  background-color: rgb(141, 178, 226);
  padding: 5px;
  width: 100px;
  margin: 5px;
  line-height: 100px;
  font-weight: bold;
  border: 2px solid black;
}
.flex-start {
  align-self: flex-start;
}
.flex-end {
  align-self: flex-end;
}
.center {
  align-self: center;
}
.stretch {
  align-self: stretch;
}
.baseline {
  align-self: baseline;
}

输出：

flex-start、flex-end、center、stretch、baseline

支持的浏览器：

• 谷歌浏览器 29.0
• 火狐 22.0
• 微软边缘 12.0
• 互联网浏览器 11+
• 歌剧 48.0
• Safari 10.0