CSS3:FlexBox的詳解

時間  2019-11-19
標籤 css3 css flexbox 詳解 欄目 CSS 简体版
原文   原文鏈接

Flexbox是Flexible box 的簡稱（靈活的盒子容器），是CSS3引入的新的佈局模式。它決定了元素如何在頁面上排列，使它們能在不一樣的屏幕尺寸和設備下可預測地展示出來。css

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

  • 在不一樣方向排列元素
  • 從新排列元素的顯示順序
  • 更改元素的對齊方式
  • 動態地將元素裝入容器

建立一個flex容器：chrome

在父元素的添加這條屬性：瀏覽器

display: flex;
<!DOCTYPE html>
<html lang="en">
<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變成彈性盒子*/
    }
    .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 class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
    </div>
</body>
</html>

運行效果：佈局

至關於兩個div自動向左浮動,默認狀況下，全部的直接子元素都被認爲是 flex 項，並從左到右依次排列在一行中。若是 flex 項的寬度總和大於容器，那麼 flex 項將按比例縮小，直到它們適應 flex 容器寬度。flex

也能夠將這個兩個子div排成一列，在.flex-container添加：flex-direction: column;網站

運行效果：ui

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

當在.flex-container添加justify-content: flex-end;裏面全部的flex將默認向左對齊變成向右對齊：code

<!DOCTYPE html>
<html lang="en">
<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 class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">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 : 任何兩個相鄰 flex 項之間的間距是相同的，但不必定等於第一個/最後一個 flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最後一個項目之間的間距是相等的。
  • space-around : flex 容器中的每一個 flex 項的每一側間距都是相等的。請注意，這意味着兩個相鄰 flex 項之間的空間將是第一個/最後一個 flex 項與其最近邊緣之間的空間的兩倍

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

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

<!DOCTYPE html>
<html lang="en">
<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="flex-container">
        <!-- 多加個class屬性，方便指定 -->
        <div class="flex-item flex-bottom">1</div>
        <div class="flex-item">2 <br />2 <br/></div>
        <div class="flex-item">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 lang="en">
<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="flex-container">
        <!-- 多加個class屬性，方便指定 -->
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>
    </div>
</body>
</html>

運行效果：

當長度不夠長時，自動換行：

當長度再短時：

拉伸 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 lang="en">
<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 class="flex-container">  
                <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；

運行效果：

將flex-container的width變爲600時：

能夠看出2 3 以不一樣的比例在填充剩餘的空間，grow-shrink則是相反的，默認爲1，即若是空間不足，該項目將縮小。

看不理解的話，推薦到這倆個網站：網站一

　　　　　　　　　　　　　　　　網站二

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程