Flex佈局的簡單使用

阿新 • • 發佈：2020-09-16

最近通過觀看pink老師的視訊學習了flex佈局，以此來記錄flex的簡單使用！

flex佈局原理

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

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

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

總結flex佈局原理：

就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式。

flex佈局父項常見屬性

以下6個屬性是對父元素設定的

flex-direction: 設定主軸的方向
justify-content: 設定主軸上的子元素排列方式
flex-wrap: 設定子元素是否換行
align-content: 設定側軸上的子元素的排列方式（多行）
align-items: 設定側軸上的子元素排列方式（單行）
flex-flow：複合屬性，相當於同時設定了flex-direction和flex-wrap

flex-direction屬性

flex-direction

: 設定主軸的方向

主軸和側軸

在flex佈局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸

預設主軸方向就是X軸，水平向右
預設側軸方向就是y軸，水平向下

屬性值

flex-direction屬性決定主軸的方向（即專案的排列方向）

注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸。而我們的子元素就是跟著主軸來排列的。

屬性值	說明
row	預設值從左到
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

頁面程式碼：

    <style type 
="text/css">
            div{
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </body>

檢視：

給父級元素新增flex屬性：display: flex;

預設的主軸是X軸：子元素跟著主軸排列

flex-direction: row

<style type="text/css">
            div{
                display: flex;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
        </style>

檢視：

flex-direction: row-reverse

 <style type="text/css">
            div{
                display: flex;
                flex-direction: row-reverse;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
        </style>

檢視：

flex-direction: column

<style type="text/css">
            div{
                display: flex;
                flex-direction: column;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
        </style>

檢視：

flex-direction: column-reverse

<style type="text/css">
            div{
                display: flex;
                flex-direction: column-reverse;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
        </style>

檢視：

justify-content屬性

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

注意：使用這個屬性之前一定要確定好主軸是哪個

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

主軸為X軸（flex-direction: row）

justify-content: flex-start

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

justify-content: flex-end

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

justify-content: center

div{
                display: flex;
                flex-direction: row;
                justify-content: center;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

justify-content: space-around

div{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

justify-content: space-between

div{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

flex-wrap屬性

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

預設情況下，專案都排在一條線（又稱軸線）上。flex佈局中預設是不換行的。

屬性	說明
nowrap	預設值，不換行
wrap	換行
wrap-reverse	倒序換行

flex-wrap: nowrap

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

flex-wrap: wrap

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

flex-wrap: wrap-reverse

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap-reverse;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-item屬性

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

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

屬性值	說明
flex-start	從上到下
flex-end	從下到上
center	居中，垂直居中
stretch	預設值拉伸

align-item: flex-start

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: flex-start;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-item: flex-end

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: flex-end;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-item: center

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: center;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-item: stretch，拉伸子盒子不需要設定高度

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: stretch;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                /*height: 100px;*/
                background-color: purple;
                margin: 10px;
            }

檢視：

align-content屬性

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

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

align-content: flex-start

<style type="text/css">
            div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: flex-start;
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                /*height: 100px;*/
                background-color: purple;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
        </div>
    </body>

檢視：

align-content: flex-end

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: flex-end;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-content: center

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: center;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-conter: space-around

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: space-around;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-content: space-between

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: space-between;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-content: stretch 需子元素不設定高度的時候生效

div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                /*align-items: flex-end;*/
                align-content: stretch;
                width: 800px;
                height: 300px;
                background-color: pink;
            }

檢視：

align-content和align-items的區別

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

flex-flow屬性

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

flex-flow:row wrap;

flex子項常見屬性

以下為flex子項常見的屬性：

flex：定義子項分配的剩餘空間，用flex來表示佔多少份

align-self:控制子項自己在側軸上排列的方式。允許單個專案與其他專案不一樣的排列方式，可覆蓋align-items屬性。預設為auto，表示繼承父元素的align-items屬性。如無父元素，等同於stretch。

order: 定義專案的排列順序。數值越小越靠前，預設為零。

flex屬性

flex：定義子項分配的剩餘空間，用flex來表示佔多少份

<style type="text/css">
            div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: flex-start;
                /*align-content: stretch;*/
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 50px;
                background-color: purple;
                margin: 10px;
            }
            div .span1{
                flex: 2;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="span1">1</span>
            <span class="span2">2</span>
            <span class="span3">3</span>
        </div>
    </body>

檢視：

align-self屬性

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

<style type="text/css">
            div{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: flex-start;
                /*align-content: stretch;*/
                width: 800px;
                height: 300px;
                background-color: pink;
            }
            div span{
                width: 150px;
                height: 50px;
                background-color: purple;
                margin: 10px;
            }
            div .span1{
                flex: 2;
            }
            div .span2{
                align-self: center;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="span1">1</span>
            <span class="span2">2</span>
            <span class="span3">3</span>
        </div>
    </body>

檢視：

order屬性

<style type="text/css"> 
div{ 
　　display: flex; 
   flex-direction: row;
 　justify-content: flex-start; 
　 flex-wrap: nowrap;
   align-items: flex-start; /*align-content: stretch;*/ 
   width: 800px; 
   height: 300px; 
   background-color: pink;
 } 
div span{
 width: 150px;
 height: 50px;
 background-color: purple;
 margin: 10px;
} 
div .span1{
 flex: 2;
 }
div .span2{
 align-self: center;
 } 
div .span3{
 order: -1;
 } 
</style>

</head>
<body>
    <div>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
    </div>
</body>