什麼是css3的flexbox-前端問答-PHP中文網

flexbox的意思為“彈性盒子”，是CSS3引入的新的佈局模式，是一種可伸縮的靈活的web頁面佈局方式；Flexbox佈局模式能夠擴展和收縮flex容器內的元素，以最大限度地填滿可用空間。

什麼是css3的flexbox

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

Flexbox是Flexible box 的簡稱（靈活的盒子容器），是CSS3引入的新的佈局模式，一種可伸縮的靈活的web頁面佈局方式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可預測地展現出來。

Flexbox具有強大的功能，可以輕鬆實現很多複雜佈局，在它出現之前，我們經常使用的佈局方式是浮動或固定寬度百分比來進行佈局，程式碼量較大且難以理解。

flex佈局之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與先前佈局方式（如table 佈局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：

#重新排列元素的顯示順序
更改元素的對齊方式
動態地將元素裝入容器

#建立一個flex容器：

在父元素的新增這條屬性：

display: flex;

登入後複製

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex; /*让这个div变成弹性盒子*/
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
</style>

    <div>
        <div>1</div>
        <div>2</div>
    </div>

登入後複製

運行效果：

##相當於兩個div自動向左浮動,預設情況下，所有的直接子元素都被認為是flex 項，並從左到右依序排列在一行中。如果 flex 項的寬度總和大於容器，那麼 flex 項將按比例縮小，直到它們適應 flex 容器寬度。

也可以將這個兩個子div排成一列，在.flex-container新增：flex-direction: column;

運行效果：

如果加的屬性是flex-direction: column-reverse;即兩個div互換（reverse的意思就是相反的），

當在.flex-container添加justify-content: flex-end;裡面所有的flex將預設向左對齊變成向右對齊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;  /*让这个div变成弹性盒子*/
        justify-content: flex-end;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
</style>
<body>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

登入後複製

運行效果：

當justify-content值為：center時，flex項居中對齊，其運作效果：

justify-content總共有六個值前三個比較好理解：justify-start（默認，向左對齊），center，justify-end，

space-evenly : flex 容器起始邊緣和第一個flex 項之間的間距和每個相鄰flex 項之間的間距是相等。（愚人碼頭註：這個屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是60 版本之後才支持。延伸一下，align-content: space-evenly

space-between
space-around

網上流行的一張圖，更好的解釋了justify-content屬性值的表現：

也可以給指定的div讓它變成向上或向下對齊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;  /*让这个div变成弹性盒子*/
        justify-content: center;
        align-items: center;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
    .flex-bottom{
        /* 让这个div向上 */
        align-self: flex-start;
    }
</style>
<body>
    <div>
        <!-- 多加个class属性，方便指定 -->
        <div class="flex-item flex-bottom">1</div>
        <div>2 <br />2 <br/></div>
        <div>3 <br />3<br />3</div>
    </div>
</body>
</html>

登入後複製

運行效果：

#同樣的，algin-item也有五個屬性值：

flex-start | flex-end | center | baseline | stretch;

登入後複製

下圖就是對應的效果：

允許flex 項多行/列排列

###

    .flex-container{
        background-color: #131111;
        display: flex; 
        flex-wrap: wrap;
    }

登入後複製

默认情况下， flex 项不允许多行/列排列(nowrap)，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中，它也有三个取值：

nowrap（默认）:不换行.

wrap:换行，第一行在上方

wrap-reverse：换行，第一行在下方

插入一段代码，看下效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-evenly;/**/
        align-content: space-evenly;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
    .flex-bottom{
        /* 让这个div向下 */
        align-self: stretch;
    }
</style>
<body>
    <div>
        <!-- 多加个class属性，方便指定 -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

登入後複製

运行效果：

当长度不够长时，自动换行：

什麼是css3的flexbox

当长度再短时：

什麼是css3的flexbox

拉伸 flex 项

flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用 1/3，而第二个 flex 项将占据余下的空间,flex-grow控制的是flex项的拉伸比例，而不是占据 flex 容器的空间比例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;
    }
    .flex-item1{flex-grow: 0;}
    .flex-item2{flex-grow: 1;}
    .flex-item3{flex-grow: 2;}
    .flex-container{ 
        width:400px;
        padding:10px;
        background-color: #F0f0f0; 
      }
      .flex-container .flex-item{
        padding:20px 0;
        text-align: center;
        width:90px;
        background-color: #B1FF84; 
      }
      .flex-container .flex-item:first-child{ 
        background-color: #F5DE25; 
      }
      .flex-container .flex-item:last-child{ 
        background-color: #90D9F7; 
      }

</style>
<body>
        <div>  
                <div class="flex-item flex-item1">1</div>
                <div class="flex-item flex-item2">2</div>
                <div class="flex-item flex-item3">3</div>
              </div>
</body>
</html>

登入後複製

我将三个div全部设为width：90px；

运行效果：

什麼是css3的flexbox