一、flex佈局體驗

1.1 傳統佈局與flex佈局

傳統佈局	flex佈局
相容性好	操作方便，佈局極為簡單，移動端應用很廣泛
佈局繁瑣	PC端瀏覽器支援情況較差
侷限性，不能在移動端很好的佈局	IE 11或更低版本，不支援或部分支援

建議：

1. 如果是pc端頁面佈局，我們還是傳統佈局
2. 如果是移動端或者不考慮相容性問題的pc端頁面佈局，我們還是使用flex彈性佈局

1.2 初體驗

   <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

<style>
        div {
            display: flex;
            width: 80%;
            height: 200px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            margin-right: 5px;
        }
 </style>

二、flex佈局原理

2.1 佈局原理

flex是flexible Box的縮寫，意為“彈性佈局”，用來盒裝模型提供最大的靈活性，任何一個容器都可以指定為flex佈局

• 當我們為父盒子設為flex佈局之後，子元素的float、clear和vertical-align屬性將失效
• 伸縮佈局=彈性佈局=伸縮盒佈局=flex佈局

採用的Flex佈局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱“專案”

• 體驗中div就是flex父容器
• 體驗中span就是子容器flex專案
• 子容器可以橫向排列也可以縱向排列
  總結flex佈局原理：
  就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式

三、flex佈局父項常見屬性

3.1 justify-content 設定主軸上的子元素的排列方式

justify-content 屬性定義了專案在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是哪一個

屬性值	說明
flex-start	預設值從頭部開始，如果主軸是x軸，則從左往右
flex-end	從尾部開始排列
center	在主軸居中對齊（如果主軸是x軸則水平居中）
space-around	平分剩餘空間
space-between	先兩邊貼邊 再平分剩餘空間（重要）

3.2 flex-wrap 設定子元素是否換行

預設的情況下，專案都排在一條線（又稱“軸線”）上，flex-wrap屬性定義，flex佈局中預設是不換行的

屬性值	說明
nowrap	預設值，不換行
wrap	換行

3.3 align-items設定側軸上的子元素的排列方式（單行）

該屬性是控制子項在側軸（預設是y軸）上的排列方式，在子項為單項的時候使用

屬性值	說明
flex-start	從上到下
flex-end	從下到上
center	擠在一起居中（垂直居中）
stretch	拉伸（預設值）

3.4 align-content 設定側軸上的子元素的排列方式（多行）

設定子項在側軸的排列方式並且只能用於子項出現換行的情況（多行），在單行的情況下是沒有效果的

屬性值	說明
flex-start	預設值在側軸的頭部開始排序
flex-end	在側軸的尾部開始排序
center	在側軸的中間顯示
space-around	子項在側軸平分剩餘空間
space-between	子項在側軸先分佈在兩側，在平分剩餘空間
stretch	設定子項元素高度平分父元素高度

3.5 align-content和align-items區別

• align-items適用於單行的情況下，只有上對齊，下對齊，居中和拉伸
• align-content適用於換行（多行）的情況下（單行的情況下無效），可以設定上對齊，下對齊，居中，拉伸以及平均分配剩餘空間等屬性值
• 總結就是單行找align-items多行找align-content

3.6 flex-flow

flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性

        flex-flow: column wrap;

四、flex佈局子項常見屬性

• flex子專案佔的份數
• align-self控制子項在自己側軸的排序方式
• order屬性定義子項的排列順序（前後順序）

4.1 flex屬性

flex屬性自定義子專案分配剩餘空間，用flex來表示佔多少份數

.item{
flex:<number>;/* default 0 */
}

4.2 align-self 控制自己在側軸上的排列方式

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可以覆蓋align-items屬性。
預設值auto，表示繼承父元素的align-items屬性，如果沒有父元素則等同於stretch

4.3 order屬性定義專案的排列順序

數值越小，排列越向前，預設0。
注意：和z-index不一樣