佈局之: flex(CSS3新增)

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

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  去幫助小青蛙回家吧~~

 

相關文章