CSS 小結筆記之伸縮佈局 (flex)

時間  2019-12-09
標籤 css 小結 筆記 伸縮 佈局 flex 欄目 CSS 简体版
原文   原文鏈接

CSS flex 是一種伸縮佈局，以前塊級元素佈局在同一行，能夠經過display或position或float來實現，而本篇介紹一個新的方法——flex（彈性佈局）。html

flex 爲和模型佈局提供了極大地靈活性，所謂彈性佈局便可根據大小斷定自動伸縮。ide

flex相關的各個屬性以下：佈局

一、display：flex；在父盒子定義flex，子盒子才能使用flex屬性flex

二、flex：none |flex-grow  flex-shrink  flex-basis  設置子盒子的縮放比例，能夠一塊兒指定也能夠單獨指定。（均不可爲負數）ui

　　（1）none 至關於 flex： 0 0 auto；spa

　　（2）flex-grow 用來規定盒子的擴展比率，即盒子相對於其餘盒子可以分配到的空間的比值，沒有指定flex的不參與分配。3d

<!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>
    <style>
        .fa {
            width: 800px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            background-color: aqua;
            width: 200px;
        }
        
        .son2 {
            background-color: green;
            flex-grow: 1;
            width: 50px;
        }
        
        .son3 {
            background-color: blue;
            flex-grow: 2;
            width: 30px;
        }
        
        .son4 {
            background-color: orange;
            flex-grow: 3;
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="son4">4</div>
    </div>
</body>

</html>
View Code

　　　　

　　　　上面圖中子盒子所佔大小的計算方法爲：code

　　　　a、.son1 沒有指定flex 所以不參與分配大小爲固定的200px；htm

　　　　b、剩下的空間須要減去盒子固有的寬度來繼續分配，便可分配空間爲blog

　　　　　　600-50-30-80=440px

　　　　c、指定分配的比率爲1:2:3 因此各自能分配到的大小爲440*（1/6），440*（2/6），440*（3/6）

　　　　d、最後可得出各個盒子的大小

　　　　　　.son2: 440*（1/6）+50=123.3px

　　　　　　.son3: 440*（2/6）+30=176.7px

　　　　　　.son4: 440*（3/6）+80=300px

　　（3）、flex-shrink 規定盒子收縮率，通常是在子盒子整體大小超過父盒子狀況下，肯定各個盒子的縮小比例。

　　　　

<!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>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            width: 100px;
            flex-shrink: 1;
            background-color: aqua;
        }
        
        .son2 {
            width: 200px;
            flex-shrink: 2;
            background-color: orange;
        }
        
        .son3 {
            width: 300px;
            flex-shrink: 3;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>

</html>
View Code

　　　　

　　　　上面圖中子盒子所佔大小的計算方法爲：

　　　　a、子盒子整體寬度大小爲：100+200+300=600px

　　　　b、超過父盒子 600-400=200px

　　　　c、收縮比率爲：1:2:3 ，則對收縮大小進行加權求值,求出收縮大小

　　　　　　.son1:  200*[100*1/（1*100+2*200+3*300）]=14px

　　　　　　.son2:  200*[200*2/（1*100+2*200+3*300）]=57px

　　　　　 　.son1:  200*[300*3/（1*100+2*200+3*300）]=129px

　　　　d、最終各個盒子大小爲

　　　　　　.son1: 100-14=86px；

　　　　　　.son2: 200-57=143px；

　　　　　　.son3: 300-129=171px；

　　（4）、flex-basis：長度 |百分比

<!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>
    <style>
        /* 超過按照比例劃分 */
        
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            width: 100px;
            flex-basis: 35%;
            background-color: aqua;
        }
        
        .son2 {
            width: 200px;
            flex-basis: 30%;
            background-color: orange;
        }
        
        .son3 {
            width: 300px;
            flex-basis: 50%;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>

</html>
View Code

　　　　

　　　　通常設置不超過盒子大小或者不超過100%，超過100%則按比例分配空間。

　　　　如上圖按7:6:10 來分配，設置爲auto，則以自身大小來分配。

　　（5）、經常使用複合屬性

　　　　　　flex：1至關於 flex：1 1 0%；

　　　　　　flex：auto 至關於 flex：1 1 auto；

 　　　　　　flex：none 至關於 flex：0 0 auto；

　　　　　　 flex：0 none 或flex：initial  至關於 flex：0 1 auto；

三、flex-direction：row | row-reverse | column | column-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>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
            flex-direction: column-reverse;
        }
        
        .son1 {
            flex: 1;
            background-color: aqua;
        }
        
        .son2 {
            flex: 1;
            background-color: orange;
        }
        
        .son3 {
            flex: 1;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>

</html>
View Code

　　

四、justify-content: flex-start | flex-end | center | space-between | space-around  子盒子在父盒子中的水平對齊方式。　　　

　　flex-start ：默認值，項目向容器起始位置對齊（靠左對齊） 
<!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>
    <style>
        .fa {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            justify-content: flex-start;
        }
        
        .son {
            flex: 0 0 20%;
            background-color: aqua;
        }
        
        .son:nth-child(2) {
            background-color: orange;
        }
        
        .son:nth-child(3) {
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>

</html>
View Code

　　接下來只將justify-content 值改變，就不重複寫代碼了，只給出結果圖

　　　
　　flex-end：項目向容器結束位置對齊。（靠右對齊）
　　
　　center：項目位於容器的中間。（水平居中）　　
　　
　　space-between：各個項目中間有空隙，可是開頭和結尾緊貼容器（父盒子）
　　
space-around：各個項目中間有空隙，且空隙距離相同（至關於每一個盒子左右給了一個相同的margin值）
　　
五、 align-items：flex-start | flex-end | center | baseline | stretch  子盒子在父盒子中的垂直對齊方式
  
<!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>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            align-items: stretch;
        }
        
        .son {
            flex: 0 0 20%;
            padding: 30px 0;
            background-color: aqua;
            font-size: 40px;
        }
        
        .son:nth-child(2) {
            padding: 50px 0;
            background-color: orange;
        }
        
        .son:nth-child(3) {
            padding: 100px 0;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>

</html>
View Code

　　

　　一樣接下來幾種只給出效果圖

　　flex-start：上對齊
　　
　　flex-end ：下對齊
　　
　　center：垂直居中對齊
　　
　　baseline：與項目的第一行文字的基線對齊，所以當基線在同一條線上時，與flex-start一致
　　
六、 flex-wrap：nowrap | wrap | wrap-reverse   當子盒子大小超過父盒子是是否換行
　　nowrap：默認值，不換行。強行在一行顯示，所以每一個盒子的大小都會減小。 
<!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>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            align-items: baseline;
            flex-wrap: nowrap;
        }
        
        .son {
            width: 50px;
            background-color: aqua;
            font-size: 40px;
        }
        
        .son:nth-child(2) {
            background-color: orange;
        }
        
        .son:nth-child(3) {
            background-color: deeppink;
        }
        
        .son:nth-child(4) {
            background-color: green;
        }
        
        .son:nth-child(5) {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
    </div>
</body>

</html>
View Code

　　

　　wrap：換行顯示。

　　

　　wrap-reverse：換行且倒着顯示

　　

七、flex-flow: flex-direction  flex-wrap;   flex-flow 是flex-direction 和 flex-wrap 的簡寫，默認值是flex-flow： row wrap

八、align-content：flex-start | flex-end | center | space-between | space-around | stretch  容器中多行的對齊方式

 

<!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>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            flex-wrap: wrap;
            align-content: stretch;
        }
        
        .son {
            /* width: 50px; */
            padding: 10px;
            background-color: aqua;
            font-size: 40px;
        }
        
        .son:nth-child(2) {
            background-color: orange;
        }
        
        .son:nth-child(3) {
            background-color: deeppink;
        }
        
        .son:nth-child(4) {
            background-color: green;
        }
        
        .son:nth-child(5) {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
    </div>
</body>

</html>
View Code

 

　　

　　flex-start：上對齊

　　

　　flex-end：下對齊

　　

 

　　center：居中對齊

　　

　　space-between ：與justify-content中的 space-between相似 最上一行 頂對齊，最下一行 底對齊

　　

　　space-around：與justify-content中的 space-around相似 各個行上下有空隙，且空隙距離相同（至關於每行上下給了一個相同的margin值）

　　

九、order：設置子盒子顯示順序。值取整數，能夠爲負數，數值越小的排列方向越靠前。

<!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>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            flex-wrap: wrap;
            align-content: space-between;
        }
        
        .son {
            /* width: 50px; */
            padding: 10px;
            background-color: aqua;
            font-size: 40px;
        }
        
        .son:nth-child(2) {
            background-color: orange;
            order: -2;
        }
        
        .son:nth-child(3) {
            background-color: deeppink;
        }
        
        .son:nth-child(4) {
            background-color: green;
            order: 3;
        }
        
        .son:nth-child(5) {
            order: 2;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
    </div>
</body>

</html>
View Code

　　

注意事項：

上述的9個屬性，其中一、三、四、五、六、七、8是放在容器（父盒子）的屬性

而二、9是項目(子盒子)的屬性

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