一、什麼是彈性盒

彈性盒子是 CSS3 的一種新的布局模式，在移動端布局中應用廣泛。
CSS3 彈性盒（ Flexible Box 或 flexbox ），是一種當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和配置設定空白空間。

二、flex布局

flex 容器：采用 flex 布局的元素的父元素；
flex 項目：采用 flex 布局的元素的父元素的子元素；
容器預設存在兩根軸：水準的主軸( main axis )和垂直的交叉軸( cross axis )，主軸的開始位置叫做 main start ，結束位置叫做 main end ；交叉軸的開始位置叫做 cross start ，結束位置叫做 cross end 。項目預設沿主軸排列。
作用：控制它的所有兒子輩子元素。(注意隻對兒子輩子元素生效)
特點：
- 1、彈性盒子裡面的兒子輩子元素都可以添加大小
- 2、如果想讓彈性盒子裡的一個子元素左右上下居中，隻需要給子元素添加 margin:auto ;
- 3、彈性盒裡的子元素都是沿着"主軸"排列的。“主軸”：可以為x軸也可以是y軸，當x為主軸時，y就為側軸(預設x為主軸)
- 4、設為 flex 布局以後，子元素的 float 、 clear 和 vertical-align 屬性将失效。

三、觸發彈性盒

給父元素添加 display:flex / inline-flex;
- flex ：獨占一行的彈性盒
- inline-flex ：行内彈性盒

四、彈性盒容器屬性

【注】彈性盒容器屬性都是給父元素添加的。

1、改變主軸的方向： `flex-direction`

row ：x軸為主軸(預設值)
row-reverse ：以x軸為主軸，反向排列，以末端為起始點
column ：y軸為主軸
column-reverse ：以y軸為主軸，反向排列，以末端為起始點

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
        section {
            width: 600px;
            height: 600px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒：給父元素添加 */
            display: flex;
            /* 控制主軸的方向為y軸 */
            flex-direction: column; 
        }
        span {
            width: 100px;
            height: 100px;
            line-height: 100px;
            color: #fff;
            background: skyblue;
            border-radius: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <section>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </section>
</body>
</html>

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑左圖為預設主軸x軸，右圖為更改了主軸方向為y軸。

2、改變主軸的對齊方式： `justify-content`

flex-start ：在起始點對齊(預設)
flex-end ：在末端對齊
center ：居中
space-between ：兩端對齊
space-around ：自動配置設定間距（等于給子元素兩端加了margin）

section {
            width: 600px;
            height: 600px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
            /* 控制主軸的對齊方式 */
            justify-content: flex-start;
        }

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑主軸對齊方式(此例主軸預設為x軸）

3、改變側軸的對齊方式： `align-items`

flex-start ：側軸開始的位置對齊
flex-end ：側軸結束的位置對齊
center ：側軸居中的位置
baseline ：基線對齊（同 flex-start ）
stretch ：預設值。在子元素未設定寬(y軸)或高(x軸)的情況下，是拉伸狀态

section {
            width: 600px;
            height: 600px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
            /* 控制主軸的對齊方式 */
            justify-content: space-around;
            /* 控制側軸的對齊方式 */
            align-items: center;
        }

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑側軸對齊方式(此例主軸預設為x軸）

section {
            width: 400px;
            height: 200px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
            /* 控制主軸的對齊方式 */
            justify-content: space-around;
            /* 控制側軸的對齊方式 */
            align-items: stretch;
        }
        span {
            width: 50px;
            /* 不設高 */
            /* height: 50px; */ 
            line-height: 50px;
            color: #fff;
            background: skyblue;
            border-radius: 100%;
            text-align: center;
        }

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑側軸對齊方式為

stretch

時，不設高，為拉伸狀态(此例主軸預設為x軸）

4、控制子元素是否換行： `flex-wrap`

預設情況：彈性盒不會讓子元素換行
- 1、當子元素沒有内容隻有寬高時，添加 n 個子元素都不會溢出，而是重新計算寬高
- 2、當子元素有内容且内容超出父元素時，子元素溢出
nowrap ：不換行
wrap ：換行
wrap-reverse ：反向換行（從主軸開始的地方排列反向）

section {
            width: 400px;
            height: 200px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
            /* 控制換行 */
            flex-wrap: wrap;
        }
        span {
            width: 100px;
            height: 100px;
            line-height: 50px;
            color: #fff;
            background: skyblue;
            border-radius: 100%;
            text-align: center;
        }
        <body>
    <section>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </section>
</body>

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑左圖未換行，子元素變形；右圖設定了換行

5、控制行與行之間的對齊方式： `align-content`

flex-start ：預設狀态：行與行之間不存在預設的行間距
flex-end ：在末端對齊
center ：居中
space-between ：兩端對齊
space-around ：自動配置設定間距（等于給子元素兩端加了margin）

section {
            width: 400px;
            height: 400px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
            /* 控制主軸的對齊方式 */
            justify-content: space-around;
            /* 控制換行 */
            flex-wrap: wrap;
            /* 控制行與行的對齊方式 */
            align-content: flex-start;
        }
        span {
            width: 100px;
            height: 100px;
            line-height: 50px;
            color: #fff;
            background: skyblue;
            border-radius: 100%;
            text-align: center;
        }

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

五、彈性盒項目屬性

【注】彈性盒項目屬性都是給子元素添加的。

1、控制子元素的側軸對齊方式： `align-self`

auto ：預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為stretch
stretch ：元素被拉伸以适應容器。
center ：元素位于容器的中心。
flex-start ：元素位于容器的開頭。
flex-end ：元素位于容器的結尾。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
        section {
            width: 600px;
            height: 400px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
        }
        div:nth-child(1) {
            background: skyblue;
            /* 控制自身側軸對齊 */
            align-self: flex-start;
        }
        div:nth-child(2) {
            background: purple;
            align-self: flex-end;
        }
        div:nth-child(3) {
            background: orangered;
            align-self: center;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

2、控制子元素的排序： `order`

order:number; 排序優先級，數字越大越往後排，預設為0，支援負數。

<style>
            section {
            width: 600px;
            height: 400px;
            background: pink;
            margin: 100px auto;
            /* 觸發彈性盒 */
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
        }
        div:nth-child(1) {
            background: skyblue;
            /* 控制自身側軸對齊 */
            align-self: flex-start;
            /* 控制排序 */
            order: 2;
        }
        div:nth-child(2) {
            background: purple;
            align-self: flex-end;
            /* 控制排序 */
            order: 1;
        }
        div:nth-child(3) {
            background: orangered;
            align-self: center;
            /* 設定寬度 */
            /* width: 200px; */
        }
    </style>

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑數字越大，排在越後面

3、剩餘空間的配置設定

簡寫文法： flex:1;
配置設定主軸剩餘空間
- 1、可以給某個子元素加
- 2、也可以給所有子元素加（意味着所有的子元素平均配置設定）
- 3、假設某個元素設定 flex:2; 意為該元素分到了剩餘空間的2份

div {
            width: 100px;
            height: 100px;
        }
        div:nth-child(1) {
            background: skyblue;
            /* 控制自身側軸對齊 */
            align-self: flex-start;
             /* 配置設定剩餘空間：div1占2份 */
            flex: 2;
        }
        div:nth-child(2) {
            background: purple;
            align-self: flex-end;
            /* 控制排序 */
            /* order: 1; */
            /* 配置設定剩餘空間：div2占1份 */
            flex: 1;
        }
        div:nth-child(3) {
            background: orangered;
            align-self: center;
            /* 設定寬度 */
            /* width: 200px; */
        }

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

↑↑↑div1占剩餘空間（600-300）的2份，div2占剩餘空間的1份

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

一、什麼是彈性盒

二、flex布局

三、觸發彈性盒

四、彈性盒容器屬性

1、改變主軸的方向： `flex-direction`

2、改變主軸的對齊方式： `justify-content`

3、改變側軸的對齊方式： `align-items`

4、控制子元素是否換行： `flex-wrap`

5、控制行與行之間的對齊方式： `align-content`

五、彈性盒項目屬性

1、控制子元素的側軸對齊方式： `align-self`

2、控制子元素的排序： `order`

3、剩餘空間的配置設定

繼續閱讀

趕工心得（一）

十大酷炫屌的圖像懸停特效

兩種清除浮動的方法

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

移動端布局神器 -- 彈性盒(flexbox)一、什麼是彈性盒二、flex布局三、觸發彈性盒四、彈性盒容器屬性五、彈性盒項目屬性

一、什麼是彈性盒

二、flex布局

三、觸發彈性盒

四、彈性盒容器屬性

1、改變主軸的方向： flex-direction

2、改變主軸的對齊方式： justify-content

3、改變側軸的對齊方式： align-items

4、控制子元素是否換行： flex-wrap

5、控制行與行之間的對齊方式： align-content

五、彈性盒項目屬性

1、控制子元素的側軸對齊方式： align-self

2、控制子元素的排序： order

3、剩餘空間的配置設定

繼續閱讀

1、改變主軸的方向： `flex-direction`

2、改變主軸的對齊方式： `justify-content`

3、改變側軸的對齊方式： `align-items`

4、控制子元素是否換行： `flex-wrap`

5、控制行與行之間的對齊方式： `align-content`

1、控制子元素的側軸對齊方式： `align-self`

2、控制子元素的排序： `order`