佈局之: flex（CSS3新增）

我是豬姐呀丶發表於2020-06-18
FlexCSSS3

flex 基本概念

　　flex佈局（flex是flexible box的縮寫）， 也稱為彈性盒模型 。將屬性和屬性值（display:flex; ）寫在哪個標籤樣式中，誰就是 容器；它的所有子元素自動成為容器成員，稱為專案。

當一個元素的display 取值為flex，所有專案(子元素)會在一行顯示；如果所有專案的尺寸之和大於容器，也不會超出父元素的寬、高度。不會換行(每個專案都會自動縮小相應的比例)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佈局之:flex</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <style>
        section {
            width: 500px;
            height: 800px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </section>
</body>
</html>

頁面效果 ： 每一個容器都等比例縮小了

 

　　css程式碼分為兩種: 一類是適用於容器的 (設定主軸的起始位置、換行、主軸的對齊方式、多跟軸線對齊方式)；一類是適用於專案的(設定專案的位置)。

容器常用的屬性和屬性值

由於重複程式碼較多，就不一 一上傳程式碼了,大家可以自己動手，敲敲程式碼，試試看。

一、設定主軸的起始方向  flex-direction：

預設為X軸（行）：

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

flex-direction:row; 預設是X軸的起始方向為開始位置 (從左到右依次擺放)；
flex-direction:row-reverse; 改變X軸的起始方向為結束位置 (從右到左依次擺放)；

設定主軸的起始方向為Y軸（列）：

flex-direction:column; 預設是Y軸的起始方向為開始位置(從上到下依次擺放)
flex-direction:column-reverse; 改變Y軸的起始方向為結束位置(從下到上依次擺放)

二、設定專案是否換行  flex-wrap：（預設是不換行）

 <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-wrap: nowrap;  預設值是不換行；（n個專案都會在一行顯示.如果專案尺寸之和大於容器主軸的尺寸,則專案會自動縮小相應比列.） (參考第一個程式碼 頁面結果展示)

flex-wrap: wrap; 設定換行；（超出主軸的寬，則進行換行。換行後，兩行之間會出現間距，是因為垂直方向有剩餘空間，會平均分配給第二行的上下）

flex-wrap: wrap-reverse; 倒序換行；（如果有兩行,第2行顯示在前面,第一行顯示在後面）

三、主軸方向的對齊方式  justify-content：

專案是一個時：

 <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content:flex-start; 以主軸開始方向對齊 (預設)
justify-content:flex-end; 以主軸結束方向對齊

justify-content:center; 主軸方向居中

專案是多個時:

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>


justify-content: space-between; 兩端對齊 （第一個專案在容器的起始位置,最後一個專案在容器的結束位置，中間距離相等）

 


justify-content: space-around;  分散對齊


justify-content: space-evenly;  平分剩餘空間，每個專案之間的距離相同

 

四、主軸改變為交叉軸方向的對齊方式

一根軸線：  主軸需改變為Y軸：flex-direction: column;

 

align-items: baseline; 以專案的第一行文字的基線對齊

align-items: stretch; (專案沒有給高的情況下,stretch就是預設值，如果專案沒有設定高度,就是容器的高）

 

 <style>
        section {

            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* 主軸需改變為Y軸 專案按列擺放 */
            flex-direction: column;
            /* align-items: flex-start;  預設擺放方式 */
            /* align-items: center; */
            /* align-items: flex-end; */


        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

align-items: flex-start;  交叉軸從開始位置對齊
align-items: center; 交叉軸居中對齊


align-items: flex-end; 交叉軸從結束位置對齊

多根軸線： (所有專案的尺寸之和，必須大於容器的尺寸,使專案換行顯示)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: space-between; */
            /* align-content: space-around; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

align-content: flex-start; 交叉軸從開始位置對齊
align-content: center; 交叉軸居中對齊


align-content: flex-end; 交叉軸從結束位置對齊

align-content: space-between; 交叉軸兩端對齊


align-content: space-around; 交叉軸分散對齊

align-content: space-evenly; 交叉軸平均分配

 

專案的屬性和屬性值：

一、order 控制專案位置

order：1；
取值 : 正、負數 (預設值是 0)
值越小越靠前 值越大越靠後 。

（適用場景: 1.搜尋引擎優化,提升SEO 把重要的資訊在html程式碼中靠前擺放,但不影響佈局 2.調整專案位置）

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(4) {
            order: -1;
        }
    </style>

設定一個或多個[專案]在交叉軸的對齊方式:

 <style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            align-self: center;
        }
        
        div:nth-child(3) {
            align-self: flex-end;
        }
    </style>

align-self: flex-start; 設定專案在交叉軸開始位置擺放 （預設位置）
align-self: center; 設定專案在交叉軸居中擺放

align-self: flex-end; 設定專案在交叉軸結束位置擺放

設定某一個或多個元素放大比例

　　條件:所有專案的尺寸之和要小於容器的尺寸
　　（沒有剩餘空間，則設定此屬性無效。）

一個元素有 flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
    </style>

多個專案有flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            box-sizing: border-box;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
        
        div:nth-child(4) {
            flex-grow: 2;
        }
    </style>

效果展示

將容器的剩餘空間分成相應的flex-grow的份數，再按照每個專案的份數，分給有flex-grow屬性的專案。

 

　　總之，flex使用起來特別方便，可適用於響應式佈局，也可使用聖盃佈局。只是屬性較多，也要多練、多實踐 ，相信你也能很快熟練使用flex的。

推薦一個小遊戲，很有趣，又能增強關於flex的使用方法 ：Flexbox Froggy  http://blog.xiaoboswift.com/flexbox/#zh-cn  去幫助小青蛙回家吧~~

 

相關文章