04-前端技術_flex布局

一，體驗

二，flex-direction

三，justify-content

四，flex-wrap和align-items

1，flex-wrap

2，align-items

五，align-content

六，flex

七，align-self

八，導航欄

一，體驗

了解flex布局、它與傳統布局的差別及應用場景

對比:

傳統布局：

相容性好、布局繁瑣、浮動（清除浮動）
有局限性不能在移動端很好的布局

flex布局：

操作友善，布局極其簡單，移動端使用比較廣泛
PC端浏覽器支援情況比較差

使用：

如果是PC端頁面布局，采用傳統方式；如果是移動端或者是不考慮相容的PC端則采用flex布局；

特點：

任何一個标簽都可以指定使用 flex 布局。
當為父标簽設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性将失效。
使用思想上和傳統盒子完全不同，不要再想子元素是塊級元素、行内元素。
flex通過行和列的思路來控制布局；

名稱：

采用 flex 布局的元素，稱為 flex 容器（flexcontainer），父級簡稱"容器"。
它的所有子元素自動成為容器成員，稱為 flex 項目（flexitem），簡稱"項目"。

文法：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>Document</title>
    <style>
        /* 容器 */
        .obox {
            width: 100%;
            height: 300px;
            border: 1px solid #222;
            /* flex布局 */
            display: flex;
            /* 水準居中 兩端對齊居中 */
            justify-content: space-between;
            /* 單行垂直居中 */
            align-items: center;
        }

        /* 項目 */
        .os {
            width: 200px;
            height: 200px;
            background: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os"></div>
        <div class="os"></div>
        <div class="os"></div>
        <div class="os"></div>
    </div>
</body>

</html>

二，flex-direction

作用：确認主軸的選擇

特點：把主軸确認，元素預設按照确認的主軸方向進行排布

文法:

flex-direction:row /* 預設值 從左到右 */

row	預設值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

特點:

預設：主軸： x 軸方向，水準向右；側軸：是y 軸方向，水準向下；

舉例：展示flex的四種排列方向。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 800px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* flex-direction 讓元素按照主軸的方向進行排列 */
            /* 預設是row 從左到右 */
            /* flex-direction: row; */
            /* 從右到左 */
            /* flex-direction: row-reverse; */
            /* 從上到下 */
            /* flex-direction: column; */
            /* 從下到上 */
            flex-direction: column-reverse;

        }

        .os {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

三，justify-content

單詞justify：整理版面

作用：控制主軸上的元素的各種各樣的對齊方式

類似：word裡的左對齊，右對齊，居中對齊，分散對齊；

文法

justify-content:flex-start

flex-start	預設值從頭部開始如果主軸是x軸，則從左到右
flex-end	從尾部開始排列
center	在主軸居中對齊(如果主軸是x軸則水準居中)
space-around	平分剩餘空間
space- between	先兩邊貼邊再平分剩餘空間(重要)

舉例：列舉整理版面的幾種方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 800px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* justify-content 控制元素在主軸上對齊的方式 */
            justify-content: flex-start;
            /* 尾部對齊 */
            justify-content: flex-end;
            /* 居中對齊 */
            justify-content: center;
            /* 平分剩餘空間 */
            justify-content: space-around;
            /* 先兩邊在平分剩餘空間 */
            justify-content: space-between;
        }

        .os {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

四，flex-wrap和align-items

1，flex-wrap

作用：控制子元素是否換行；

文法：

/* 預設值 不換行；子項目加起來的寬度超過父級的寬度時，子項寬度會被縮小，寬度隻是不生效，必須設定 */ 
flex-wrap:nowrap; 
/* 換行； 子項的總寬加起來超過父級寬度，就會換行*/ 
flex-wrap:wrap;

舉例：展示item是否換行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* 不換行 */
            /* flex-wrap: nowrap; */
            /* 換行 */
            flex-wrap: wrap;
        }

        .os {
            width: 200px;
            height: 200px;
            background: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

2，align-items

該屬性是控制子項單行在側軸（預設是y軸）上的對齊方式，在子項為單項（單行）的時候使用；

整體一行元素看成整體，設定在側軸上的對齊方式

文法:

flex-start	預設值從上到下
flex-end	從下到上
center	擠在一起居中(垂直居中)
stretch	拉伸

注意: stretch如果項目未設定高度或設為auto将占滿整個容器的高度

舉例：展示item在側軸上的對齊方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* align-item 單行 在y軸的對齊方式 */
            /* 預設的是flex-start 從上到下 */
            align-items: flex-start;
            /* 從下到上 */
            /* 從下到上 */
            align-items: flex-end;
            /* 居中 */
            align-items: center;
            /* 拉伸 */
            align-items: stretch;
        }

        .os {
            width: 100px;
            /* height: 100px; */
            background: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

五，align-content

設定子項在側軸上的排列方式，并且隻能用于子項出現換行的情況或者多行

文法:

flex-start	預設值在側軸的頭部開始排列
flex-end	在側軸的尾部開始排列
center	在側軸中間顯示
space- around	子項在側軸平分剩餘空間
space-between	子項在側軸先分布在兩頭，再平分剩餘空間
stretch	設定子項元素高度平分父元素高度

注意: 容器内必須有多行的項目，該屬性才能渲染出效果。

舉例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            flex-wrap: wrap;
            /* align-content 側軸上多行情況排列方式 */
            /* 多行對齊 */
            /* align-content: flex-start; */
            /* 從下面對齊 */
            /* align-content: flex-end; */
            /* 中間對齊 */
            /* align-content: center; */
            /* 平均分 */
            /* align-content: space-around; */
            /* 先兩邊 後中間平均分 */
            /* align-content: space-between; */
            /* 側軸平均分多行 */
            align-content: stretch;
        }

        .os {
            width: 200px;
            /* height: 200px; */
            background: red;

        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

六，flex

作用：子元素去占有（劃分）在主軸上的剩餘空間

文法

.item { // 百分比或者是1~10的數字 
    flex: 20% 或者 2; 
}

舉例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 100px;
            border: 1px solid red;
            display: flex;
        }

        /* 項目屬性 */
        .os1 {
            background: yellow;
            flex: 20%;
        }

        .os2 {
            background: #ccc;
            flex: 80%;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os1">1</div>
        <div class="os2">2</div>
    </div>
</body>

</html>

七，align-self

作用：控制子項，自己在側軸上的對齊方式；

特點：

預設值auto，父級設定了align-items ，auto繼承父級元素上設定側軸的對齊方式：align-items 屬性；

如果父級沒有設定align-items 屬性，auto預設值會變為strecth；

文法：

flex-start	預設值從上到下
flex-end	從下到上
center	擠在一起居中(垂直居中)
stretch	拉伸

舉例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 100px;
            border: 1px solid #222;
            display: flex;
            /* 容器側軸上的對齊 */
            /* align-items: center; */
        }

        .os {
            width: 50px;
            /* height: 50px; */
            align-self: stretch;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

</html>

八，導航欄

分析：

整體:

确認主軸水準向右

單獨一個元素

整體單個元素:flex布局
确認主軸: Y軸列
側軸對齊: 居中

舉例：通過flex實作導航欄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 200px;
            border: 1px solid #222;
            display: flex;
        }

        .obox>div {
            flex: 1;/* 平分整個容器 */
            background: blue;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .oimg {
            width: 50px;
            height: 50px;
            background: pink;
            border-radius: 50%;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="oson">
            <span class="oimg"></span>
            <span class="info">大娃</span>
        </div>
        <div class="oson">
            <span class="oimg"></span>
            <span class="info">二娃</span>
        </div>
        <div class="oson">
            <span class="oimg"></span>
            <span class="info">三娃</span>
        </div>
    </div>
</body>

</html>

04-前端技術_flex布局

一，體驗

二，flex-direction

三，justify-content

四，flex-wrap和align-items

1，flex-wrap

2，align-items

五，align-content

六，flex

七，align-self

八，導航欄

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden