什么是Flex布局，如何学习，又该如何使用？【重点学习系列---干货十足---千字详解】

移动端常用布局方式—Flex（弹性布局）

​ 上一篇文章向大家介绍了移动端的基础知识。包括视口（viewport）、meta标签设置、多倍图、移动端调试方法、移动端开发主流方案，以及移动端初始化CSS样式……等。那么今天我将向大家详细讲解移动端的布局方案。

移动端常用布局方式：

1. 流式布局（百分比布局）
2. Flex（弹性布局）
3. rem适配布局（less+rem+媒体查询、flexible.js+rem）
4. 响应式布局（bootstarp栅栏布局）
5. 混合布局

​ 可以看出我们移动端的常用布局方式还是很多的，不过各有优缺点，而且我们最常用的是rem适配布局方式。那么今天我将带领大家学习前两种布局方式，即流式布局 和 Flex弹性布局，并且在今后的布局中，不管是移动端还是PC端Flex弹性布局都将是我们最常用和最喜欢使用的布局手段，希望大家能够将其掌握，并且熟练运用。

一、流式布局

介绍

​ 流式布局，就是百分比布局，也称非固定像素布局，是移动端开发中经常使用的布局方式之一。它是通过将盒子的宽度设置为百分比（搭配min-*、max-*）来根据屏幕的宽度来进行伸缩的，不受固定像素的限制，内容向两侧填充。

min-*和max-*属性

• max width 最大宽度 max height 最大高度
• min width 最小宽度 min height 最小高度

特征

• 宽度和高度自适应，或者高度写死，并不是百分百还原设计图
• 百分比计算困难
• 精灵图和字体图标都是固定大小，包括字体……等也是固定大小，所以并不是所有的元素都是自适应的
• 位置、边框等样式不能按百分比计算，所有后期会出现拉伸有空白部分出现的情况

二、flex布局

1、引言

​ 谈到flex布局，我不知道有多少人跟我一样，在本能的想到justify-content:center与align-items:center两条属性之后，除此之外的其它属性居然显得格外陌生。

​ 可以说包括我在内的大部分人，或许都是被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。

​ 但是我觉得，flex布局不应该仅仅局限于对齐方式的使用，熟练掌握它对于页面布局也是有较大好处的，所以本篇文章也将详细讲解flex弹性布局的使用，那么就从现在开始喽！

2、背景

​ 网页布局（layout）是CSS的一个重点应用知识，传统的布局解决方案都是基于盒装模型、依赖display属性+position属性+float属性来实现的，但是它对于特殊布局（移动端的布局方式）非常不便，比如垂直居中就不容易实现。

​ 2009年，W3C提出了一种新的方案—Flex布局，它可以便捷、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持。那么这就意味着，我们可以很安全的使用这项功能，而不考虑兼容新问题，并且flex布局也将成为未来布局的首选方案。

3、flex布局是什么？

​ flex是“Flexible Box”的缩写，直译为弹性布局，又叫伸缩布局、伸缩盒布局、弹性盒布局……等，用来对盒装模型提高最大的灵活性。当然，任何一个容器都可以指定为 flex 布局，包括行内元素。

块和行内块元素使用 flex布局：

.box{
  display: flex;
}

行内块元素使用 flex布局：

.box{
  display: inline-flex;
}

Wekit内核的浏览器使用 flex布局，必须加上-webkit前缀：

.box{
  display: -webkit-flex; 
  display: -webkit-inline-flex;
}

注意：当我们为父盒子设为 flex布局后，子元素的 float、clear、vertical-align属性将失效。

4、基本概念

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

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

5、容器的属性

父项常用属性

1. flex-direction 属性

   flex-direction 属性决定主轴的方向（即项目的排列方式）。

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

注意：

• 在flex布局中，水平的主轴可以理解为x轴，而垂直的交叉着，即侧轴，我们可以理解为y轴。
• 主轴默认方向为x轴，水平向右
• 侧轴默认方向为y轴，水平向下
• 主轴和侧轴是会变化的，就看flex-direction属性设置谁主轴，则另一个就是侧轴，而我们的子元素是跟着主轴的方向来排列的。
  

2. justify-content

   justify-content 属性定义了项目在主轴上的对齐方式，那么在使用该属性之前，我们必须要先确定主轴是哪一个，方向如何。

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

3. flex-wrap

   flex-wrap 属性设置子项目是否换行。默认情况下，项目都是排在一条线（又称“轴线”）上的。flex-wrap属性定义：如果一条线轴放不下，该如何换行。

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

属性介绍：

• nowrap（默认）：不换行

• wrap：换行，第一行在上方

  

• wrap-reverse：换行，第一行在下方

4. align-items

   align-items 属性定义子项目在交叉轴或侧轴（默认是y轴）上的对齐或排列方式，在子项目为单项（单行）的时候使用

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

   属性介绍：

   • flex-start ：交叉轴的起点对齐，即：从顶部对齐
   • flex-end ：交叉轴的重点对齐，即：从底部对齐
   • center :交叉轴的重点对齐，即：居中显示
   • baseline :项目的第一行文字的基线对齐
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，否则默认就是水平x轴顶部对齐。

   

5. align-content

   align-count 属性定义了多根轴线的对齐方式。简单来说该属性也是设置子项在侧轴上的排列方式，并且只能用于子项目出现换行（多行）的情况下使用。但是在单行下是没有效果的，我们可以使用align-items属性。

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

复合属性

​ flex-flow

​ flex-flow 属性是 flex-direction 属性 和 flex-wrap 属性的复合属性，或者说是简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

子项常用属性

1. order

   order 属性定义子项目的排列顺序。数值越小，排列越靠前，默认为0

   .item {
     order: <Number>;
   }
   

2. flex-grow

   flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

   .item {
     flex-grow: <Number>;
   }
   

注意：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项目多出一倍。

1. flex-shrink

   flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

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

2. flex-basis

   flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据整个属性计算主轴是否有多余的空间。默认值为auto，即项目的本来大小。

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

   简单来说，flex-basis 属性用于规定灵活项目的初始长度，或者说定义在分配剩余空间之前元素的默认大小。

   它可以设置根width或height属性一样的数值（比如10px，rem或者20%），则项目将占据固定空间。如果设置为0，则不考虑内容周围的额外空间。如果设置为auto，则根据其flex-grow值分配额外空间。

3. flex

   flex属性是flex-grow、flex-shrink 和 flex-basis的简写属性，默认值为0 1 auto。后两个属性可选

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

   该属性有两个快捷值：auto (1 1 auto)和none (0 0 auto)。

   注意：建议优先使用这个属性，而不是单独写三个分离的属性，其一，是因为浏览器会推算相关值；其二，一般情况下我们只写一个数字，即对应flex-grow属性，也就是定义子项目分配剩余空间，表示占多少份数。

4. align-self

   align-self 属性允许某个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，也就是水平x轴顶部对齐。

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

   注意：该属性除了auto外，其他都与align-items属性完全一致。

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Demo</title>
       <style>
           .box {
               width: 100%;
               height: 400px;
               background-color: rebeccapurple;
               display: flex;
               justify-content: center;
               align-items: stretch;
           }
           
           .son {
               width: 200px;
               height: 200px;
               margin-left: 5px;
               background-color: pink;
               flex: 1;
           }
           
           .box div:nth-child(2) {
               align-self: center;
           }
       </style>
   </head>
   
   <body>
       <div class="box">
           <div class="son"></div>
           <div class="son"></div>
           <div class="son"></div>
           <div class="son"></div>
           <div class="son"></div>
           <div class="son"></div>
       </div>
   </body>
   
   </html>
   

6、常见flex布局思路

常见布局：

• 单行水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: rebeccapurple;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            flex: 1;
            margin-left: 5px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

</html>

• 多行水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: rebeccapurple;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            /* 主轴垂直居中，根据需求添加 */
            /* justify-content: center; */
            align-content: center;
        }
        
        .son {
            width: 150px;
            height: 100px;
            margin: 5px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

</html>

**布局思路:**默认主轴是X轴–将主轴设置为Y轴–将侧轴设为居中对齐，如果还要垂直居中，则将主轴居中对齐。

---

  margin: 5px;
        background-color: pink;
    }
</style>

```

**布局思路:**默认主轴是X轴–将主轴设置为Y轴–将侧轴设为居中对齐，如果还要垂直居中，则将主轴居中对齐。

---

​ 由于知识点比较多，并且都是一些零碎的知识点，博主今天先带领大家学习这两种布局方式，后续将陆续更新，当然，如果有讲的不对的地方还请大家能够指出，谢谢！