CSS3 彈性盒子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 彈性盒子</title>
    <style>
        /*CSS3 彈性盒子 簡單示例*/
        div.flex-container_a{
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: lightsteelblue;
        }

        div.flex-item_a{
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        /*CSS3 彈性盒子 direction*/
        div.flex-container_b{
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: lightsteelblue;
            direction: rtl;
        }

        div.flex-item_b{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        /*CSS3 彈性盒子 flex-direction*/
        div.flex-container_c{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
            width: 400px;
            height: 250px;
            background-color: lightgray;

        }

        div.flex-item_c{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }


        div.flex-container_d{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column-reverse;
            flex-direction: column-reverse;
            width: 400px;
            height: 250px;
            background-color: lightgray;

        }

        div.flex-item_d{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        /*CSS3 彈性盒子 justify-content*/
        div.flex-container_e{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            width: 500px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_e{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        div.flex-container_f{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: flex-end;
            justify-content: flex-end;
            width: 500px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_f{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }


        div.flex-container_g{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            width: 500px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_g{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            margin: 10px;
        }

        div.flex-container_h{

            display: -webkit-flex;
            display: flex;
            -webkit-justify-content:space-between;
            justify-content: space-between;
            width: 500px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_h{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;

        }


        div.flex-container_i{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            width: 500px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_i{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }


        /* CSS3 彈性盒子 align-items */

        div.flex-container_j{
            display: flex;
            display: -webkit-flex;
            align-items: flex-start;
            -webkit-align-items: flex-start;
            width: 500px;
            height: 400px;
            background-color: lightgray;
        }

        div.flex-item_j{
            width: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        div.flex-container_k{
            display: -webkit-flex;
            display: flex;
            align-items: flex-end;
            -webkit-align-items: flex-end;
            width: 500px;
            height: 400px;
            background-color: lightgray;
        }
        div.flex-item_k{
            width: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }


        div.flex-container_l{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            width: 500px;
            height: 400px;
            background-color: lightgray;
        }

        div.flex-item_l{
            width: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        div.flex-container_m{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: baseline;
            align-items: baseline;
            width: 500px;
            height: 400px;
            background-color: lightgray;
        }

        div.flex-item_m{
            width: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        div.flex-container_n{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: stretch;
            align-items: stretch;
            width: 500px;
            height: 400px;
            background-color: lightgray;
        }

        div.flex-item_n{
            width: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        /* CSS3 彈性盒子 flex-wrap */

        div.flex-container_p{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            width: 300px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_p{
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }



        div.flex-container_q{
              display: -webkit-flex;
              display: flex;
              -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
              width: 300px;
              height: 250px;
              background-color: lightgray;
          }

        div.flex-item_q{
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        div.flex-container_r{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
            width: 300px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item_r{
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        /* CSS3 彈性盒子 align-content */
        div.flex-container_s{
            display: -webkit-flex;
            display: flex;
            -webkit-align-content: center;
            align-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;

            width: 300px;
            height: 400px;

            background-color: lightgray;
        }

        div.flex-item_s{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }


        /*彈性盒子 子元素屬性*/
        /*order 排序*/
        div.flex-container{
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: lightgray;
        }

        div.flex-item{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: cornflowerblue;
        }

        div.flex-item_auto{
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: cornflowerblue;
        }

        div.order{
            order: -1;
        }

        div.margin-right-auto{
            margin-right: auto;
        }


        /*align-self*/
        div.flex-item_ss {
            background-color: cornflowerblue;
            width: 60px;
            min-height: 100px;
            margin: 10px;
        }

        div.item1 {
            -webkit-align-self: flex-start;
            align-self: flex-start;
        }
        div.item2 {
            -webkit-align-self: flex-end;
            align-self: flex-end;
        }

        div.item3 {
            -webkit-align-self: center;
            align-self: center;
        }

        div.item4 {
            -webkit-align-self: baseline;
            align-self: baseline;
        }

        div.item5 {
            -webkit-align-self: stretch;
            align-self: stretch;
        }



        div.flex-item_ff {
            background-color: cornflowerblue;
            margin: 10px;
        }

        div.itemf1 {
            -webkit-flex: 2;
            flex: 2;
        }

        div.itemf2 {
            -webkit-flex: 1;
            flex: 1;
        }

        div.itemf3 {
            -webkit-flex: 1;
            flex: 1;
        }

    </style>
</head>
<body>

<h2>CSS3 彈性盒子</h2>
<div class="flex-container_a">
    <div class="flex-item_a">Item 1</div>
    <div class="flex-item_a">Item 2</div>
    <div class="flex-item_a">Item 3</div>
</div>

<br><br>

<h2>CSS3 彈性盒子 direction</h2>
<div class="flex-container_b">
    <div class="flex-item_b">Item 1</div>
    <div class="flex-item_b">Item 2</div>
    <div class="flex-item_b">Item 3</div>
</div>

<br><br>

<h2>CSS3 彈性盒子 flex-direction</h2>
<h3> row-reverse</h3>
<div class="flex-container_c">
    <div class="flex-item_c">Item 1</div>
    <div class="flex-item_c">Item 2</div>
    <div class="flex-item_c">Item 3</div>
</div>

<br><br>

<h3> column-reverse</h3>
<div class="flex-container_d">
    <div class="flex-item_d">Item 1</div>
    <div class="flex-item_d">Item 2</div>
    <div class="flex-item_d">Item 3</div>
</div>

<br><br>

<h2>CSS3 彈性盒子 justify-content</h2>
<h3>flex-start</h3>
<div class="flex-container_e">
    <div class="flex-item_e">Item 1</div>
    <div class="flex-item_e">Item 2</div>
    <div class="flex-item_e">Item 3</div>
</div>

<br><br>

<h3>flex-end</h3>
<div class="flex-container_f">
    <div class="flex-item_f">Item 1</div>
    <div class="flex-item_f">Item 2</div>
    <div class="flex-item_f">Item 3</div>
</div>

<br><br>

<h3>center</h3>
<div class="flex-container_g">
    <div class="flex-item_g">Item 1</div>
    <div class="flex-item_g">Item 2</div>
    <div class="flex-item_g">Item 3</div>
</div>

<br><br>

<h3>space-between</h3>
<div class="flex-container_h">
    <div class="flex-item_h">Item 1</div>
    <div class="flex-item_h">Item 2</div>
    <div class="flex-item_h">Item 3</div>
</div>

<br><br>

<h3>space-around</h3>
<div class="flex-container_i">
    <div class="flex-item_i">Item 1</div>
    <div class="flex-item_i">Item 2</div>
    <div class="flex-item_i">Item 3</div>
</div>

<br><br>


<h2>CSS3 彈性盒子 align-items</h2>
<h3>flex-start</h3>
<div class="flex-container_j">
    <div class="flex-item_j">Item 1</div>
    <div class="flex-item_j">Item 2</div>
    <div class="flex-item_j">Item 3</div>
</div>

<br><br>

<h3>flex-end</h3>
<div class="flex-container_k">
    <div class="flex-item_k">Item 1</div>
    <div class="flex-item_k">Item 2</div>
    <div class="flex-item_k">Item 3</div>
</div>

<br><br>

<h3>center</h3>
<div class="flex-container_l">
    <div class="flex-item_l">Item 1</div>
    <div class="flex-item_l">Item 2</div>
    <div class="flex-item_l">Item 3</div>
</div>

<br><br>

<h3>baseline</h3>
<div class="flex-container_m">
    <div class="flex-item_m">Item 1</div>
    <div class="flex-item_m">Item 2</div>
    <div class="flex-item_m">Item 3</div>
</div>

<br><br>

<h3>stretch</h3>
<div class="flex-container_n">
    <div class="flex-item_n">Item 1</div>
    <div class="flex-item_n">Item 2</div>
    <div class="flex-item_n">Item 3</div>
</div>

<br><br>



<h2>CSS3 彈性盒子 flex-wrap</h2>
<h3>nowrap</h3>
<div class="flex-container_p">
    <div class="flex-item_p">Item 1 Item 1 Item 1</div>
    <div class="flex-item_p">Item 2 Item 2 Item 2</div>
    <div class="flex-item_p">Item 3 Item 3 Item 3</div>
</div>

<br><br>

<h3>wrap</h3>
<div class="flex-container_q">
    <div class="flex-item_q">Item 1</div>
    <div class="flex-item_q">Item 2</div>
    <div class="flex-item_q">Item 3</div>
</div>

<br><br>

<h3>wrap-reverse</h3>
<div class="flex-container_r">
    <div class="flex-item_r">Item 1</div>
    <div class="flex-item_r">Item 2</div>
    <div class="flex-item_r">Item 3</div>
</div>

<br><br>


<h2>CSS3 彈性盒子 aglign-content</h2>
<h3>nowrap</h3>
<div class="flex-container_s">
    <div class="flex-item_s">Item 1 Item 1 Item 1</div>
    <div class="flex-item_s">Item 2 Item 2 Item 2</div>
    <div class="flex-item_s">Item 3 Item 3 Item 3</div>
</div>

<br><br>

<h2>CSS3 彈性盒子 彈性子元素屬性</h2>
<h3>排序 order</h3>
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item order">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<br><br>


<h3>margin-right: auto</h3>
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item margin-right-auto">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<br><br>

<h3>完美居中</h3>
<div class="flex-container">
    <div class="flex-item_auto">flex item 1</div>
</div>
<br><br>

<h3>align-self</h3>

<div class="flex-container">
    <div class="flex-item_ss item1">flex-start</div>
    <div class="flex-item_ss item2">flex-end</div>
    <div class="flex-item_ss item3">center</div>
    <div class="flex-item_ss item4">baseline</div>
    <div class="flex-item_ss item5">stretch</div>
</div>

<br><br>

<h3>flex</h3>
<div class="flex-container">
    <div class="flex-item_ff itemf1">flex item 1</div>
    <div class="flex-item_ff itemf2">flex item 2</div>
    <div class="flex-item_ff itemf3">flex item 3</div>
</div>

</body>
</html>

1慧瘤、CSS3 彈性盒子(Flex Box)

彈性盒子是 CSS3 的一種新的布局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox）妻坝，是一種當頁面需要適應不同的屏幕大小以及

設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間涵叮。

2脂新、CSS3 彈性盒子內容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器谒府。

彈性容器內包含了一個或多個彈性子元素拼坎。

注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局完疫。

彈性子元素通常在彈性盒子內一行顯示泰鸡。默認情況每個容器只有一行。

以下元素展示了彈性子元素在一行內顯示壳鹤，從左到右:

實例

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

當然我們可以修改排列方式盛龄。

如果我們設置 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面布局也跟著改變:

實例

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

3器虾、flex-direction

flex-direction 屬性指定了彈性子元素在父容器中的位置讯嫂。

語法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

row：橫向從左到右排列（左對齊），默認的排列方式兆沙。
row-reverse：反轉橫向排列（右對齊欧芽，從后往前排，最后一項排在最前面葛圃。
column：縱向排列千扔。
column-reverse：反轉縱向排列，從后往前排库正，最后一項排在最上面曲楚。
以下實例演示了 row-reverse 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 column 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 column-reverse 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

4、justify-content 屬性

內容對齊（justify-content）屬性應用在彈性容器上褥符，把彈性項沿著彈性容器的主軸線（main axis）對齊龙誊。

justify-content 語法如下：

justify-content: flex-start | flex-end | center | space-between | space-around
各個值解析:

flex-start：
彈性項目向行頭緊挨著填充。這個是默認值喷楣。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線趟大，而后續(xù)彈性項依次平齊擺放鹤树。

flex-end：
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線逊朽，而后續(xù)彈性項依次平齊擺放罕伯。

center：
彈性項目居中緊挨著填充。（如果剩余的自由空間是負的叽讳，則彈性項目將在兩個方向上同時溢出）追他。

space-between：
彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項岛蚤，則該值等同于flex-start邑狸。否則，第1個彈性項的外邊距和行的main-start邊線對齊涤妒，而最后1個彈性項的外邊距和行的main-end邊線對齊推溃，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等届腐。

space-around：
彈性項目平均分布在該行上铁坎，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項犁苏，則該值等同于center硬萍。否則，彈性項目沿該行分布围详，且彼此間隔相等（比如是20px）朴乖，同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

以下實例演示了 flex-end 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 center 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 space-between 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 space-around 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

5助赞、align-items 屬性

align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式买羞。

語法
align-items: flex-start | flex-end | center | baseline | stretch
各個值解析:

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界雹食。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置畜普。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）群叶。
baseline：如彈性盒子元素的行內軸與側軸為同一條吃挑，則該值與'flex-start'等效。其它情況下街立，該值將參與基線對齊舶衬。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸赎离，但同時會遵照'min/max-width/height'屬性的限制逛犹。
以下實例演示了 stretch(默認值) 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 flex-start 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 flex-end 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 center 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 baseline 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

5、flex-wrap 屬性

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:

nowrap - 默認虽画，彈性容器為單行掠手。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器為多行狸捕。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發(fā)生斷行
wrap-reverse -反轉 wrap 排列众雷。
以下實例演示了 nowrap 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 wrap 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

以下實例演示了 wrap-reverse 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

6灸拍、align-content 屬性

align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設置彈性子元素的對齊砾省，而是設置各個行的對齊鸡岗。

stretch - 默認。各行將會伸展以占用剩余的空間编兄。
flex-start - 各行向彈性盒容器的起始位置堆疊轩性。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊狠鸳。
space-between -各行在彈性盒容器中平均分布揣苏。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半件舵。
以下實例演示了 center 的使用:

實例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

彈性子元素屬性
排序
語法
order:
各個值解析:

<integer>：用整數(shù)值來定義排列順序卸察，數(shù)值小的排在前面∏觯可以為負值坑质。
order 屬性設置彈性容器內彈性子元素的屬性:

實例

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

對齊
設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間临梗。所以設置垂直方向margin值為"auto"涡扼，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。

以下實例在第一個彈性子元素上設置了 margin-right: auto; 盟庞。它將剩余的空間放置在元素的右側：

實例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

完美的居中
以下實例將完美解決我們平時碰到的居中問題吃沪。

使用彈性盒子，居中變的很簡單什猖，只想要設置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:

實例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

7巷波、align-self

align-self 屬性用于設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

auto：如果'align-self'的值為'auto'卸伞，則其計算值為元素的父元素的'align-items'值抹镊，如果其沒有父元素，則計算值為'stretch'荤傲。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界垮耳。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸终佛，則會向兩個方向溢出相同的長度）俊嗽。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效铃彰。其它情況下绍豁，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'牙捉，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸竹揍，但同時會遵照'min/max-width/height'屬性的限制。
以下實例演示了彈性子元素上 align-self 不同值的應用效果：

實例

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

8邪铲、flex

flex 屬性用于指定彈性子元素如何分配空間芬位。

語法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:

auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率带到。
[ flex-basis ]：定義彈性盒子元素的默認基準值昧碉。
以下實例中，第一個彈性子元素占用了 2/4 的空間揽惹，其他兩個各占 1/4 的空間:

實例

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

9被饿、CSS3 彈性盒子屬性

下表列出了在彈性盒子中常用到的屬性:

屬性描述
display 指定 HTML 元素盒子類型。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式搪搏。
align-items 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式锹漱。
flex-wrap 設置彈性盒子的子元素超出父容器時是否換行。
align-content 修改 flex-wrap 屬性的行為慕嚷，類似 align-items, 但不是設置子元素對齊哥牍，而是設置行對齊
flex-flow flex-direction 和 flex-wrap 的簡寫
order 設置彈性盒子的子元素排列順序。
align-self 在彈性子元素上使用喝检。覆蓋容器的 align-items 屬性嗅辣。
flex 設置彈性盒子的子元素如何分配空間。

最后編輯于：2019.05.17 23:50:19

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末挠说，一起剝皮案震驚了整個濱河市澡谭，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌损俭，老刑警劉巖蛙奖，帶你破解...
沈念sama閱讀 218,755評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異杆兵，居然都是意外死亡雁仲，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,305評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門琐脏，熙熙樓的掌柜王于貴愁眉苦臉地迎上來攒砖，“玉大人缸兔，你說我怎么就攤上這事〈低В” “怎么了惰蜜？”我有些...
開封第一講書人閱讀 165,138評論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長受神。經(jīng)常有香客問我抛猖，道長，這世上最難降的妖魔是什么鼻听？我笑而不...
開封第一講書人閱讀 58,791評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任财著，我火速辦了婚禮，結果婚禮上精算，老公的妹妹穿的比我還像新娘。我一直安慰自己碎连，他們只是感情好灰羽，可當我...
茶點故事閱讀 67,794評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著鱼辙，像睡著了一般廉嚼。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上倒戏，一...
開封第一講書人閱讀 51,631評論 1贊 305
城市分裂傳說
那天怠噪，我揣著相機與錄音，去河邊找鬼杜跷。笑死傍念，一個胖子當著我的面吹牛，可吹牛的內容都是我干的葛闷。我是一名探鬼主播憋槐，決...
沈念sama閱讀 40,362評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼淑趾！你這毒婦竟也來了阳仔？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 39,264評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤扣泊，失蹤者是張志新（化名）和其女友劉穎近范，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體延蟹，經(jīng)...
沈念sama閱讀 45,724評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡评矩，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,900評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了阱飘。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稚照。...
茶點故事閱讀 40,040評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出果录，到底是詐尸還是另有隱情上枕，我是刑警寧澤，帶...
沈念sama閱讀 35,742評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布弱恒，位于F島的核電站辨萍，受9級特大地震影響，放射性物質發(fā)生泄漏返弹。R本人自食惡果不足惜锈玉，卻給世界環(huán)境...
茶點故事閱讀 41,364評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望义起。院中可真熱鬧拉背，春花似錦、人聲如沸默终。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,944評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽齐蔽。三九已至两疚，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間含滴，已是汗流浹背诱渤。一陣腳步聲響...
開封第一講書人閱讀 33,060評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谈况，地道東北人勺美。一個月前我還...
沈念sama閱讀 48,247評論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長得像碑韵，于是被迫代替她去往敵國和親励烦。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,979評論 2贊 355