flex和他的孩子--flex布局属性的简单应用及页面体现

古城微笑少年丶 2022-05-30 12:27 168阅读 0赞

其实，我已经想要知道flex的秘密很久了，今天终于让我抓住时间对flex的属性进行了实际测试，已经迫不及待的想要分享一波了，废话不多说了，先上一波效果图：  
![这里写图片描述][70]  
小伙伴没有没有看的一脸懵逼啊？其实我刚看的时候也是这样的，不怕，接下来一个一个整理一下flex属性，不过，光看不行，还是得实际自己操作运行一下才行哦！！！

首先，我们先对父级盒子box和他的孩子box-item做一些准备工作，顺便定义一些不同高度的父级盒子(box1、box2):

html:

<div class="box box-1">
     <div class="box-item">第一个孩子</div>
      <div class="box-item">第二个孩子</div> 
      <div class="box-item">第三个孩子</div>
      <div class="box-item">第四个孩子</div>  
      <div class="box-item">第五个孩子</div>  
      <div class="box-item">第六个孩子</div>  
      <div class="box-item">第七个孩子</div>  
      <div class="box-item">第八个孩子</div>  
      <div class="box-item">第九个孩子</div>  
      <div class="box-item">第十个孩子</div>  
      <div class="box-item">第11个孩子</div>  
      <div class="box-item">第12个孩子</div>  
      <div class="box-item">第13个孩子</div>  
      <div class="box-item">第14个孩子</div>  
      <div class="box-item">第15个孩子</div>
      <div class="box-item">第16个孩子</div>
    </div>

css:

.box, .box1, .box2 {
      height: 420px;
      background: #efe;
      padding: 10px;
      display: flex; //注意，父级盒子此属性应为flex，后面的属性才会生效
      margin: 10px;
    }
    .box1{
      height: 220px;
    }
    .box2{
      height: 880px;
    }
    .box-item {
      width: 200px;
      height: 200px;
      border: 1px solid #aaa;
      text-align: center;
      line-height: 180px;
      margin: 5px;
      vertical-align: middle;
    }

**1. flex-direction属性**

属性值：row(默认值)、row-reverse、column、column-reverse
    
    示例1：
    	html(即上文已有的代box-1类的html):

<div class="box box-1">
      <div class="box-item">第一个孩子</div>
      <div class="box-item">第二个孩子</div> 
      <div class="box-item">第三个孩子</div>
      <div class="box-item">第四个孩子</div>  
      <div class="box-item">第五个孩子</div>  
      <div class="box-item">第六个孩子</div>  
      <div class="box-item">第七个孩子</div>  
      <div class="box-item">第八个孩子</div>  
      <div class="box-item">第九个孩子</div>  
      <div class="box-item">第十个孩子</div>  
      <div class="box-item">第11个孩子</div>  
      <div class="box-item">第12个孩子</div>  
      <div class="box-item">第13个孩子</div>  
      <div class="box-item">第14个孩子</div>  
      <div class="box-item">第15个孩子</div>
      <div class="box-item">第16个孩子</div>
    </div>

css:

/*横排排列*/
    .box-1 {
      flex-direction: row; 
    }

效果图：

![这里写图片描述][70 1]  
当flex-direction的值为row-reverse时，为横向倒序排列。横向排列时，即使孩子的宽度为定宽，当父级盒子宽度不够时，孩子都会自动横向压缩。如图所示。

效果图：

![这里写图片描述][70 2]  
当flex-direction的值为column时，为纵向排列。

效果图：

![这里写图片描述][70 3]  
当flex-direction的值为column-reverse时，为纵向倒序排列。

效果图：

![这里写图片描述][70 4]

注意：当属性值为column-reverse时，如果父级盒子高度不够显示所有的孩子，则会出现下图的情况：  
![这里写图片描述][70 5]  
flex孩子显示不完全，造成页面显示错误。

**2. flex-wrap属性**

属性值：nowrap（默认值）、wrap、wrap-reverse

当属性值为nowrap时，孩子显示为横排排列不换行，即使所有孩子总宽度超出父级盒子，也只会压缩孩子宽度，不会自动换行，效果与示例1中横排显示效果图一致。

示例2：
    
    html(仍采用上一个示例的html):

<div class="box box-1">
      <div class="box-item">第一个孩子</div>
      <div class="box-item">第二个孩子</div> 
      <div class="box-item">第三个孩子</div>
      <div class="box-item">第四个孩子</div>  
      <div class="box-item">第五个孩子</div>  
      <div class="box-item">第六个孩子</div>  
      <div class="box-item">第七个孩子</div>  
      <div class="box-item">第八个孩子</div>  
      <div class="box-item">第九个孩子</div>  
      <div class="box-item">第十个孩子</div>  
      <div class="box-item">第11个孩子</div>  
      <div class="box-item">第12个孩子</div>  
      <div class="box-item">第13个孩子</div>  
      <div class="box-item">第14个孩子</div>  
      <div class="box-item">第15个孩子</div>
      <div class="box-item">第16个孩子</div>
    </div>

css:

.box-1 {
      flex-direction: row;
      flex-wrap: wrap; /*换行，第一行在上方*/
    }

效果图：

![这里写图片描述][70 6]  
当属性值为wrap-reverse时，效果为换行，且第一行在下方。

效果图：

![这里写图片描述][70 7]

**3. flex-flow属性**

此属性是flex-direction属性和flex-wrap属性的简写形式。如 flex-flow: row wrap;

**4. justify-content属性**

属性值： flex-start、flex-end、center、space-between、space-around
    
    示例3：
    	
    html:

<div class="box1 box-3">
      <div class="box-item">第一个孩子</div>
      <div class="box-item">第二个孩子</div> 
      <div class="box-item">第三个孩子</div>
      <div class="box-item">第四个孩子</div>  
      <div class="box-item">第五个孩子</div>  
      <div class="box-item">第六个孩子</div>    
    </div>

css:

.box-3 {
      justify-content: flex-start; /*靠左排列*/
    }

效果图：

![这里写图片描述][70 8]  
当属性值为flex-end时，所有孩子靠右排列。

效果图：

![这里写图片描述][70 9]  
当属性值为center时，所有孩子居中排列。

效果图：

![这里写图片描述][70 10]  
当属性值为space-between时，两端对齐排列，孩子之间的间隔都相等。

效果图：

![这里写图片描述][70 11]  
当属性值为space-around时，每个孩子两侧的间隔相等。所以，孩子之间的间隔比孩子与边框的间隔大一倍。

效果图：

![这里写图片描述][70 12]

**5. align-items属性**

属性值：flex-start、flex-end、center、baseline、stretch
    
    示例4：
    
    html:

<div class="box box-4">
      <div class="box-item box-item-1">第一个孩子</div>
      <div class="box-item box-item-2">第二个孩子</div> 
      <div class="box-item box-item-3">第三个孩子</div>
      <div class="box-item box-item-4">第四个孩子</div>  
      <div class="box-item box-item-5">第五个孩子</div>  
      <div class="box-item box-item-6">第六个孩子</div>    
    </div>

css:

.box-item-1 {
      height: 210px;
    }
    .box-item-2 {
      height: 280px;
    }
    .box-item-3 {
      height: 350px;
    }
    .box-item-4 {
      height: 250px;
    }
    .box-item-5 {
      height: 200px;
    }
    .box-item-6 {
      height: 160px;
    }
    .box-4 {
      align-items: flex-start; /*顶对齐*/
    }

效果图：

![这里写图片描述][70 13]  
当属性值为flex-end时，所有孩子底对齐显示。

效果图：

![这里写图片描述][70 14]  
当属性值为center时，所有孩子居中对齐显示。

效果图：

![这里写图片描述][70 15]  
当属性值为baseline时，所有孩子文字基线对齐显示。

效果图：

![这里写图片描述][70 16]  
当属性值为stretch时，如果孩子未设置高度或设为auto，将占满整个容器的高度。这里我们添加一行css并将属性值改为stretch。

添加css:

.box-4 .box-item{
      height: auto;
    }

效果图：

![这里写图片描述][70 17]

**6. align-content属性**

属性值：flex-start、flex-end、center、space-between、space-around、stretch
    
    示例5：
    
    html:

<div class="box2 box-5">
      <div class="box-item">第一个孩子</div>
       <div class="box-item">第二个孩子</div> 
       <div class="box-item">第三个孩子</div>
       <div class="box-item">第四个孩子</div>  
       <div class="box-item">第五个孩子</div>  
       <div class="box-item">第六个孩子</div>  
       <div class="box-item">第七个孩子</div>  
       <div class="box-item">第八个孩子</div>  
       <div class="box-item">第九个孩子</div>  
       <div class="box-item">第十个孩子</div>  
       <div class="box-item">第11个孩子</div>  
       <div class="box-item">第12个孩子</div>  
       <div class="box-item">第13个孩子</div>  
       <div class="box-item">第14个孩子</div>  
       <div class="box-item">第15个孩子</div> 
       <div class="box-item">第16个孩子</div> 
       <div class="box-item">第17个孩子</div> 
       <div class="box-item">第18个孩子</div> 
       <div class="box-item">第19个孩子</div> 
       <div class="box-item">第20个孩子</div>
     </div>

css:

.box-5 {
      flex-wrap: wrap;
      align-content: flex-start;
    }

效果图：

![这里写图片描述][70 18]  
当属性值为flex-end时，所有孩子整体靠底显示。

效果图：

![这里写图片描述][70 19]  
当属性值为center时，所有孩子纵向居中显示。

效果图：

![这里写图片描述][70 20]  
当属性值为space-between时，每横排孩子之间的间隔都相等。

效果图：

![这里写图片描述][70 21]  
当属性值为space-around时，每横排孩子两侧间距相等，所以横排孩子之间的间距比横排孩子与边缘的间隔大一倍。

效果图：

![这里写图片描述][70 22]  
当属性值为stretch时，所有横排孩子占满整个父级盒子。

效果图：

![这里写图片描述][70 23]

**7. order属性**  
order属性定义孩子的排列顺序。数值越小，排列越靠前，默认为0。

示例6：
    
    html:

css:

.box-6 .order-1{
      order: 1;
    }
    .box-6 .order-2{
      order: -1;
    }
    .box-6 .order-3{
      order: 0;
    }

效果图：

![这里写图片描述][70 24]

**8. flex-grow属性**  
flex-grow属性定义孩子的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有孩子的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

示例7： 
    
    html:

css:

.box-7 .grow-1 {
      flex-grow: 1;
    }
    .box-7 .grow-2 {
      flex-grow: 3;
    }
    .box-7 .grow-3 {
      flex-grow: 1;
    }

效果图：

![这里写图片描述][70 25]

**9. flex-shrink属性**  
flex-shrink属性定义了孩子的缩小比例，默认为1，即如果空间不足，该孩子将缩小。如果所有孩子的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个孩子的flex-shrink属性为0，其他孩子都为1，则空间不足时，前者不缩小。

示例8：
    
    html:

<div class="box1 box-8">
      <div class="box-item shrink">第一个孩子</div>
      <div class="box-item">第二个孩子</div> 
      <div class="box-item">第三个孩子</div>
      <div class="box-item">第四个孩子</div>  
      <div class="box-item">第五个孩子</div>  
      <div class="box-item">第六个孩子</div> 
      <div class="box-item">第七个孩子</div>  
      <div class="box-item">第八个孩子</div>  
      <div class="box-item">第九个孩子</div>  
      <div class="box-item">第十个孩子</div> 
      <div class="box-item">第11个孩子</div>  
      <div class="box-item">第12个孩子</div>  
      <div class="box-item">第13个孩子</div>  
      <div class="box-item">第14个孩子</div> 
    </div>

css:

.box-8 .shrink {
      flex-shrink: 0;
    }

效果图：

![这里写图片描述][70 26]

**10. flex-basis属性**  
flex-basis属性定义了在分配多余空间之前，孩子占据的空间。浏览器根据这个属性，计算是否有多余空间。它的默认值为auto，即孩子的本来大小。

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

它可以设为跟width或height属性一样的值（比如350px），则孩子将占据固定空间。

**11. flex属性**  
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性为可选值。  
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

**12. align-self属性**  
align-self属性允许多个孩子中的其中一个孩子有与其他孩子不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

属性值： auto、flex-start、flex-end、center、baseline、stretch

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

示例9： 
    
    html:

<div class="box box-9">
      <div class="box-item box-item-1">第一个孩子</div>
      <div class="box-item box-item-1">第二个孩子</div> 
      <div class="box-item box-item-3">第三个孩子</div>
      <div class="box-item box-item-4">第四个孩子</div>  
      <div class="box-item box-item-5">第五个孩子</div>  
      <div class="box-item box-item-6">第六个孩子</div>    
    </div>

css:

.box-9 .box-item-5 {
      align-self: flex-end;
    }

效果图：

![这里写图片描述][70 27]

以上就是我学习flex时，自己演示的关于flex相关属性的一些简单应用和页面的表现效果，愿与大家讨论交流，如有错误的地方，希望大家积极反馈，谢谢！ 最后，附上我完整的演示代码百度云链接[点击下载源代码][Link 1]。

[70]: /images/20220530/b01b6f5a8df44f8798b3ac0d2d823a90.png
[70 1]: /images/20220530/370a62c7e1ad41c1ad46ce14ec4f7943.png
[70 2]: /images/20220530/11eb6d9fc226451d88d6b8aa85592abf.png
[70 3]: /images/20220530/5ba413143d3d42a89b5546a64c461bc4.png
[70 4]: /images/20220530/2ea3bbde1cfb41bfa075b9864dbbfe58.png
[70 5]: /images/20220530/4ecb1aaa70e048488c4470c1a42f3330.png
[70 6]: /images/20220530/f773cd2ae8194c84a7fb79f018d66c52.png
[70 7]: /images/20220530/73c97357c00f4b3abd7cac5f7e813ec8.png
[70 8]: /images/20220530/add0ef0b7d77445cabc7269db5732bdb.png
[70 9]: /images/20220530/b1af81083aba4cb8a42f6d564c39542b.png
[70 10]: /images/20220530/27725746386f4415bf46f7e5e4c852ae.png
[70 11]: /images/20220530/581c108dd83f410d990f7aa82ed3cee5.png
[70 12]: /images/20220530/75ebab10f6254143a446be28a3bccc4f.png
[70 13]: /images/20220530/4fffbf46fa4148e7a81f64f8cee5e747.png
[70 14]: /images/20220530/50bf610cbc6d40dc84bd433665cf4258.png
[70 15]: /images/20220530/e81be1c7253d420faaed387e8da3a7a4.png
[70 16]: /images/20220530/18a619041b3c49e2a28076e5dfd9023e.png
[70 17]: /images/20220530/3225d0d45bdb434583e5163032287839.png
[70 18]: /images/20220530/ef50c0ce62284cbcb3f1256551a04d9c.png
[70 19]: /images/20220530/566632b014fb4989a82708020fa08d7e.png
[70 20]: /images/20220530/502f872961aa41908ddab044bdd354b1.png
[70 21]: /images/20220530/3bd9db4d463742a2911f2ef59f3ea53c.png
[70 22]: /images/20220530/c8814f10b5b14e7391697569fc351284.png
[70 23]: /images/20220530/363bc269b8eb4c9d86fdbf5ad85522ed.png
[70 24]: /images/20220530/963f0725aa824bc99789a5f2f6e7d851.png
[70 25]: /images/20220530/d135d6c3c18a4935be20f6e010bce66c.png
[70 26]: /images/20220530/f87cbe20f7954019a468f5b32beee3d1.png
[70 27]: /images/20220530/742156bb9fc1426aa6b936b2adf71d0a.png
[Link 1]: https://pan.baidu.com/s/16NBDUHYQudz4s1quFXEmFQ