flex佈局

<style> 

*{margin: 0;padding: 0;} 

.parent{ 

  background: rgb(165, 165, 165); 

  height: 100vh; 

 display: flex;

 /* 

   ** flex-direction和flex-wrap的縮寫方式：flex-flow:<'flex-direction'> || <'flex-wrap'> 

 */ 

 flex-direction: row;

 /* 

   **flex-direction 改變X軸的方向 

   **row ：默認屬性 從左到右 

   **row-reverse: 反轉 

   **column:由水平方向變成垂直方向 

   **column-reverse:由水平方向變成垂直方向並進行反轉 

*/ 

flex-wrap: wrap;

/*

    **flex-wrap 改變Y軸的方向

     nowrap 默認值 從上往下 不會進行換行，會把寬度進行等比縮放

     wrap 會根據寬度的變化進行換行

     wrap-reverse 以Y進行反轉

*/

justify-content: space-between;

/*

** justify-content(伸縮容器上) 控制伸縮項在Y的展示方式

** flex-start(默認值)

** flex-end 向着Y軸的中點方向，向右靠齊

** center 在中間顯示

** space-between 把剩餘的空間進行平均分佈，第一個和最後一個都不分配

** space-around 把剩餘的空間進行平均分佈

*/

align-items: center;

/*

** align-items (伸縮容器) 控制伸縮項在Y軸在展示方式

** stretch(默認值) 在Y軸上拉伸了每個子容器,拉伸到父級容器的高度，若是當前的子元素設置了高度就不會被拉伸

** flex-start 在Y軸的最頂部，以你容器的高度爲標準

** flex-end 在Y軸的最底部，以你容器的高度爲標準

** center 在Y軸的中間，以你容器的高度爲標準，通常用來作垂直居中

*/

align-content: stretch;

/*

   ******* 該屬性在伸縮行（列）只有一行（列）的時候不生效 *********

   ** align-content (伸縮容器) 同justify-content，但align-content是針對Y軸

   ** stretch(默認值)

   ** flex-start

   ** flex-end

   ** center

   ** space-between

   ** space-around

*/

}

.parent .item{

    width: 200px;

    height: 200px;

    background: rgb(114, 163, 255);

   /* height: 200px; */

   /* line-height: 200px; */

   color: #fff;

   text-align: center;

   /* flex-grow,shrink,basis的縮寫:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>] */

    flex-grow: 1;

   /*

      ** flex-grow（伸縮項） 控制伸縮項在伸縮行的伸展程度

      ** flex-grow:<integer> 取值是一個整數

  */

  flex-shrink: 1;

   /*

      ** flex-shrink 控制伸縮項在伸縮行的收縮程度

      ** flex-shrink:<integer> 取值是一個整數

   */

  flex-basis: 1;

  /*

     ***************設置了grow或shrink的伸縮項將以這個尺寸爲基準進行伸縮**************************

     ** flex-basis 定義伸縮項伸縮前的尺寸

     ** flex-basis:auto | <length>

  */

 }

.parent .item:first-child{

   /* order: 1; */

   /*

     ** order(伸縮項) 改變指定伸縮項的位置 order:<integer> 取值是一個整數，默認是0，這個數越大那麼它的排列越靠後

   */

    background: greenyellow;

    align-self: center;

/*

    ** align-self (伸縮項)

    ** stretch(默認值)

    ** flex-start 在Y軸的最頂部，以你容器的高度爲標準

    ** flex-end 在Y軸的最底部，以你容器的高度爲標準

    ** center 在Y軸的中間，以你容器的高度爲標準，通常用來作垂直居中

 */

}

.parent .item:nth-child(2){

   background: rgb(91, 255, 91);

   /* order: 2; */

}

<div class="parent">

    <div class="item">1</div>

    <div class="item">2</div>

    <div class="item">3</div>

    <div class="item">4</div>

    <div class="item">5</div>

    <div class="item">6</div>

    <div class="item">7</div>

    <div class="item">8</div>

    <div class="item">9</div>

</div>