【CSS布局】深入理解CSS flex布局

柔光的暖阳◎ 2022-04-16 05:39 472阅读 0赞

先来看一张图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]

### 基本概念 ###

1， 主轴默认为x轴，侧轴默认为y轴。flex布局就是围绕这个轴来进行的  
2， flex container就是布局的父元素，flex item就是子元素

## flex container的属性一共有： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]

#### 1，主轴方向flex-direction: row/row-reverse/column/column-reverse ####

来看一个例子：

![在这里插入图片描述][20181117192055100.png]  
可以看到给父元素设置display后，三个子元素就排在一行了，因为flex-direction默认为row,就是**排在一行**  
再看看一个flex-direction：row-reverse的例子：

.parent {
          display: flex;
          border: 1px solid red;
          width: 500px;
          flex-direction: row-reverse;
        }
        .child {
          border: 1px solid black;
          width: 100px;
          height: 50px;
          margin: 10px;
        }

![在这里插入图片描述][20181117192600652.png]

可以看到，子元素的排列顺序反了过来

flex-direction：column就是排在一列，这里就不做演示了

#### 2，flex-wrap（换行）:nowrap/wrap/wrap-reverse ####

看个例子：

![在这里插入图片描述][20181117193101188.png]  
可以看到父元素的宽度为500，本来容不下六个子元素，但因为flex-wrap默认为nowrap。

来看加上flex-wrap：wrap的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]

显而易见，一行容不下6个子元素，他们自动进行了换行

#### 3，justify-content（主轴内容） ####

.parent {
          display: flex;
          border: 1px solid red;
          width: 500px;
          height: 60px;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between
        }
           .child {
          border: 1px solid black;
          width: 100px;
          height: 50px;
        }
         <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        
      </div>

使用justify-content：space-between（空隙在中间）  
来看效果图：  
![在这里插入图片描述][20181117194538102.png]  
可以看到，多余的空间都在元素的中间

使用justify-content：space-around（空隙在周围）  
来看效果图：

![在这里插入图片描述][20181117194743961.png]

使用justify-content：flex-start **（和主轴第一个元素对齐）**  
![在这里插入图片描述][20181117194957906.png]

使用justify-content：center（居中）  
![在这里插入图片描述][20181117195201444.png]

#### 4，align-items（侧轴内容如何排列，） ####

使用align-items： stretch（默认值，意思是伸展，拉伸）;

.parent {
          display: flex;
          border: 1px solid red;
          width: 500px;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: stretch;
        }
        .child {
          border: 1px solid black;
          width: 100px;
        }
      </style>
       <div class="parent">
        <div class="child">1 <br> 1<br>1 <br>1 <br>1 </div>
        <div class="child">2 <br> 2 <br> 2  </div>
        <div class="child">3</div>
      </div>

![在这里插入图片描述][20181117200021201.png]

可以看到子元素2 和子3元素的内容是不足以撑开容器的高度，但是align-items： stretch吧他们的容器高度进行了拉伸，和最高的元素一样高

使用align-items： flex-start（意思是所有的元素往侧轴的起点靠）;  
看效果：  
![在这里插入图片描述][20181117200457649.png]

使用align-items： center（往侧轴的中间放）：  
![在这里插入图片描述][20181117200624691.png]

align-content和justify-content的属性一样，只不过前者是侧轴，后者是主轴，这里就不介绍啦。

## 下面来看flex item的属性： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]

### 1，flex-grow（当空间多余时，这个属性决定孩子如何分配多余的空间） ###

先看一个不使用flex-grow的例子：  
![在这里插入图片描述][20181117201901562.png]

可以看到第三个孩子右边还有很多空间。  
此时，在孩子1身上写：flex-grow：1，

.child:nth-child(1) {
          flex-grow: 1
        }

效果如下：![在这里插入图片描述][20181117202234532.png]  
**可以看到孩子1吧多余的空间占满了！！！！**， 因为他吃的是独食

给孩子2加上flex-grow：1再看：

.child:nth-child(1) {
          flex-grow: 1
        }
        .child:nth-child(2) {
          flex-grow: 1
        }

效果图：  
![在这里插入图片描述][20181117202458870.png]

可以看到孩子1和孩子2平分了剩下的空间。  
如果在孩子3上加flex-grow：1 ，那么三个孩子平分这个多余的空间

如果孩子1写flex-grow：2， 孩子2写：fle-grow：1，**那么孩子1就拿三分之二的空间，孩子2就拿三分之一的空间** 是不是感觉恍然大悟呢？

### 2，flex-shrink（当空间不够时，这个属性决定孩子瘦了多少），这里就不展开讲了 ###

### 3，flex-basis（默认为元素本身的大小，一般不用） ###

### 4，order（决定flex元素的顺序） ###

看一个例子：

.parent {
          display: flex;
          border: 1px solid red;
          width: 500px;
        
        }
        .child {
          border: 1px solid black;
          margin: 2px;
          height: 60px;
        }
        .child:nth-child(1) {
          order: 2;
        }
        .child:nth-child(2) {
          order: 3;
        }
        .child:nth-child(3) {
          order: 1;
        }

效果如图：  
![在这里插入图片描述][2018111720381336.png]  
可以看到，通过改变order，来改变元素的位置。

### algin-self（自己决定自己的位置） ###

看一个例子：

.parent {
          display: flex;
          border: 1px solid red;
          width: 500px;
          justify-content: space-around;
          align-items: flex-start;
        }
        .child {
          border: 1px solid black;
          margin: 2px;
        }
        <div class="parent">
        <div class="child">111 <br> 111 <br> 111 <br> 111 </div>
        <div class="child">222  <br>  222  <br> 222 </div>
        <div class="child">333</div>
      </div>

![在这里插入图片描述][20181117204355653.png]

现在孩子3是在最上面的，可是他就很皮，就不想在最上面，那怎么办呢？  
就可以用align-self来调整孩子3的位置，比如：

.child:nth-child(3) {
          align-self: center;
        }

就有如下效果：  
![在这里插入图片描述][20181117204610829.png]

看到这里，你是不是对flex布局有的新的体会呢：）

完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220416/ef77a98c90814b93b2c44f75efaa87d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]: /images/20220416/ea352a69b9ea4fef83c3d2f4d3b6a44c.png
[20181117192055100.png]: /images/20220416/c302d3b5e80c4f6c9a862d1b97ccf80a.png
[20181117192600652.png]: /images/20220416/3b975ff1e88247679180f2b7cd99f075.png
[20181117193101188.png]: /images/20220416/46c209a69404417d819f27d9ff5cc739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]: /images/20220416/2b95ffcb239e464faebc83268629e081.png
[20181117194538102.png]: /images/20220416/8ead8149fcb04ec79060f077fef54005.png
[20181117194743961.png]: /images/20220416/0aee8ec7ac3d4dcd882521ab6bd41240.png
[20181117194957906.png]: /images/20220416/1a9fd077188a489cad6f959f509abcc1.png
[20181117195201444.png]: /images/20220416/7c3f4640cc3547028451722c43c239be.png
[20181117200021201.png]: /images/20220416/911f90cb2ed24e05937b373c3d74d422.png
[20181117200457649.png]: /images/20220416/e18ab77c58ff49cb978cda14b42fa40f.png
[20181117200624691.png]: /images/20220416/0513ad580130489db0e470d8ff03eedd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]: /images/20220416/f9069044811a436cbc4b87927d539ec0.png
[20181117201901562.png]: /images/20220416/1c2161aec0d643e096965ac3880e0aa3.png
[20181117202234532.png]: /images/20220416/5579b0ebda1740e1b6e03b51ecc05ec2.png
[20181117202458870.png]: /images/20220416/e4b696d237b24a48b292a9e86381e0bf.png
[2018111720381336.png]: /images/20220416/7e20e833975a40338971ec9ffcd5de9e.png
[20181117204355653.png]: /images/20220416/89d9632a2e3241cf8ef0d92a1666bd2a.png
[20181117204610829.png]: /images/20220416/c796fe0ea93540e8bb9f3219d290ac62.png