伸縮佈局( flex ) 常用屬性

阿新 • • 發佈：2020-07-31

伸縮佈局也叫 flex 佈局。有 2 個屬性比較重要：

display: inline-flex	將物件作為彈性伸縮盒展示，用於行內元素
display: flex	將物件作為彈性伸縮盒展示，用於塊級元素

一般都是用 display: flex 。基本都是針對塊級元素佈局。

常用屬性

flex-direction	用於指定 flex 主軸的方向，繼而決定 flex 子項在 flex 容器中的位置
	取值：	row \| row-reverse \| column \| column-reverse
justify-content	用於指定主軸(水平方向)上 flex 子項的對齊方式
	取值：	flex-start \| flex-end \| center \| space-between \| space-around
align-items	用於指定側軸(垂直方向)上 flex 子項的對齊方式
	取值：	stretch \| flex-start \| flex-end \| center \| baseline
flex-wrap	用於指定 flex 子項是否換行
	取值：	nowrap \| wrap \| wrap-reverse
align-content	該屬性只作用於多行的情況下，用於多行的對齊方式
	取值：	stretch \| flex-start \| flex-end \| center \| space-between \| space-around
align-self	該屬性用來單獨指定某 flex 子項的對齊方式
	取值：	auto \| flex-start \| flex-end \| center \| baseline \| stretch

一、主軸方向

flex-direction 用於指定Flex主軸的方向，繼而決定 Flex子項在Flex容器中的位置。

例子

如果沒有進行伸縮佈局，在標準流中就是從上往下的，如果是行級標籤就是從左往右的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset 
="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
            }
            .item{
                width: 10rem;
                height: 10rem;
                background-color: pink;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
        </div>
    </body>
</html>

程式碼

接下來通過設定 display 屬性設定伸縮佈局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
            }
            .item{
                width: 10rem;
                height: 10rem;
                background-color: pink;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
        </div>
    </body>
</html>

程式碼

可以看到設定了伸縮佈局之後主軸方向變了。伸縮佈局預設主軸方向為從左往右。

下面通過設定 flex-direction 來設定主軸方向。

各種主軸方向：

二、主軸對齊方式

justify-content 用於指定主軸(水平方向)上Flex子項的對齊方式

例子

在下面程式碼的基礎上，設定主軸對齊方式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*主軸的方向*/
                flex-direction: row;
            }
            .item{
                width: 10rem;
                height: 10rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="background-color: grey;">item1</div>
            <div class="item" style="background-color: yellow;">item2</div>
            <div class="item" style="background-color: pink;">item3</div>
        </div>
    </body>
</html>

程式碼

通過設定 justify-content 來設定主軸對齊方式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*主軸的方向*/
                flex-direction: row;
                /*主軸對齊方式*/
                justify-content: flex-start;
            }
            .item{
                width: 10rem;
                height: 10rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="background-color: grey;">item1</div>
            <div class="item" style="background-color: yellow;">item2</div>
            <div class="item" style="background-color: pink;">item3</div>
        </div>
    </body>
</html>

程式碼

設定主軸對齊方式為 flex-start 即設定主軸對齊方式為與行的起始位置對齊。

各種主軸對齊方式：

特殊情況：

1. 當剩餘空間為負數或者只有一個項時，space-between 效果等同於 flex-start

2. 當剩餘空間為負數或者只有一個項時，space-around 效果等同於 center

三、側軸對齊方式

align-items 用於指定側軸(垂直方向)上Flex子項的對齊方式

例子

主軸方向為從左向右，主軸對齊方式為居中。設定側軸（垂直方向）上 flex 子項的對齊方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*主軸的方向*/
                flex-direction: row;
                /*主軸對齊方式*/
                justify-content: center;
                /*側軸對齊方式*/
                align-items: stretch;
            }
            .item{
                width: 10rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="background-color: grey;">item1</div>
            <div class="item" style="background-color: yellow;">item2</div>
            <div class="item" style="background-color: pink;">item3</div>
        </div>
    </body>
</html>

程式碼

各種側軸對齊方式：

為了看清楚點，為 3 個盒子設定了高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*主軸的方向*/
                flex-direction: row;
                /*主軸對齊方式*/
                justify-content: center;
                /*側軸對齊方式*/
                align-items: baseline;
            }
            .item{
                width: 10rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="background-color: grey; height: 6rem;">item1</div>
            <div class="item" style="background-color: yellow; height: 10rem;">item2</div>
            <div class="item" style="background-color: pink; height: 14rem;">item3</div>
        </div>
    </body>
</html>

程式碼

四、flex 容器是單行或者多行

flex-wrap 用於指定 flex 子項是否換行

例子

如果沒有設定 flex 子項換行，可能會出現以下狀況：

設定主軸上的 flex 子項換行：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 30rem;
                height: 30rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*指定主軸上的子項是否換行*/
                flex-wrap: wrap;
            }
            .item{
                background-color: pink;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="width: 5rem; height: 5rem;">item1</div>
            <div class="item" style="width: 5rem; height: 5rem;">item2</div>
            <div class="item" style="width: 5rem; height: 5rem;">item3</div>
            <div class="item" style="width: 5rem; height: 5rem;">item4</div>
            <div class="item" style="width: 5rem; height: 5rem;">item5</div>
            <div class="item" style="width: 5rem; height: 5rem;">item6</div>
            <div class="item" style="width: 5rem; height: 5rem;">item7</div>
            <div class="item" style="width: 5rem; height: 5rem;">item8</div>
        </div>
    </body>
</html>

程式碼

可以看到主軸上的 flex 子項換行了

設定 flex容器是單行或者多行：

五、多行的對齊方式

align-content 只作用於多行的情況下，用於多行的對齊方式

例子

設定元素位於容器的中心

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*flex子項換行*/
                flex-wrap: wrap;
                /*多行對齊方式*/
                align-content: flex-start;
            }
            .item{
                width: 10rem;
                background-color: pink;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="height: 4rem;">item1</div>
            <div class="item" style="height: 5rem;">item2</div>
            <div class="item" style="height: 6rem;">item2</div>
            <div class="item" style="height: 7rem;">item2</div>
            <div class="item" style="height: 8em;">item3</div>
        </div>
    </body>
</html>

程式碼

各種多行對齊方式：

六、單獨指定某 flex 子項的對齊方式

align-self 用來單獨指定某 flex 子項的對齊方式

例子

整體是主軸方向從左往右，主軸對齊方式為居中，側軸對齊方式為居中，單獨指定 class 為 test 的 flex 子項的對齊方式為 flex-start。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html{
                font-size: 10px;
            }
            body{
                font-size: 1.6rem;
            }
            #box1{
                width: 40rem;
                height: 40rem;
                background-color: aqua;
                /*伸縮佈局*/
                display: flex;
                /*主軸居中*/
                justify-content: center;
                /*側軸居中*/
                align-items: center;
            }
            .item{
                width: 10rem;
                background-color: pink;
                margin: 5px;
            }
            .test{
                align-self: flex-start;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="item" style="height: 4rem;">item1</div>
            <div class="item test" style="height: 5rem;">item2</div>
            <div class="item" style="height: 6rem;">item2</div>
            <div class="item" style="height: 7rem;">item2</div>
            <div class="item" style="height: 8em;">item3</div>
        </div>
    </body>
</html>