碼上歡樂
相關內容    簡體    繁體

前端布局之Flex布局

本文轉載自   查看原文   2020-02-19 00:09   2316    前端


1.內容水平排列-左對齊

需要在父節點上添加：display:flex;表示使用Flex布局。

flex-direction:row; /* 表示內容直接橫排列 */

<!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>
        div{
            display:flex;
            width: 80%;
            height: 300px;
            background-color: pink;
             /* 默認的主軸是 x 軸 行 row  那么y軸就是側軸嘍 */
            /* 我們的元素是跟着主軸來排列的 */
            flex-direction:row; /* 表示內容直接橫排列 */
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image

2.內容橫排列-反轉右對齊

flex-direction:row-reverse

<!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>
        div{
            display:flex;
            width: 80%;
            height: 300px;
            background-color: pink;
             /* 默認的主軸是 x 軸 行 row  那么y軸就是側軸嘍 */
            /* 我們的元素是跟着主軸來排列的 */
            flex-direction:row-reverse; /* 表示內容直接橫排列 */
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
image

3.垂直排列

flex-direction: column;

<!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>
        div{
            display:flex;
            width: 80%;
            height: 300px;
            background-color: pink;
             /* 默認的主軸是 x 軸 行 row  那么y軸就是側軸嘍 */
            /* 我們的元素是跟着主軸來排列的 */
            /* flex-direction:row; 表示內容直接橫排列 */
            flex-direction: column;

        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
image

4.左對齊

justify-content:flex-start

<!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>
                div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: row;
            /* justify-content: 是設置主軸上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 讓我們子元素居中對齊 */
            /* justify-content: center; */
            /* 平分剩余空間 */
            /* justify-content: space-around; */
            /* 先兩邊貼邊， 在分配剩余的空間 */
            justify-content:flex-start
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

image

5.右對齊

justify-content:flex-end

<!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>
                div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: row;
            /* justify-content: 是設置主軸上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 讓我們子元素居中對齊 */
            /* justify-content: center; */
            /* 平分剩余空間 */
            /* justify-content: space-around; */
            /* 先兩邊貼邊， 在分配剩余的空間 */
            justify-content:flex-end
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

image

6.居中對齊

justify-content:center

<!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>
                div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: row;
            /* justify-content: 是設置主軸上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 讓我們子元素居中對齊 */
            /* justify-content: center; */
            /* 平分剩余空間 */
            /* justify-content: space-around; */
            /* 先兩邊貼邊， 在分配剩余的空間 */
            justify-content:center
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

image

7.平均分配

justify-content:space-around

<!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>
                div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: row;
            /* justify-content: 是設置主軸上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 讓我們子元素居中對齊 */
            /* justify-content: center; */
            /* 平分剩余空間 */
            /* justify-content: space-around; */
            /* 先兩邊貼邊， 在分配剩余的空間 */
            justify-content:space-around
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

image

8.左右對齊

justify-content: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>
                div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: row;
            /* justify-content: 是設置主軸上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 讓我們子元素居中對齊 */
            /* justify-content: center; */
            /* 平分剩余空間 */
            /* justify-content: space-around; */
            /* 先兩邊貼邊， 在分配剩余的空間 */
            justify-content:space-between
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

image

9.垂直均分

/* 我們現在的主軸是y軸 */

flex-direction: column;

/* justify-content: center; */

justify-content: space-between;

<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我們現在的主軸是y軸 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
image

10.換行設置

flex-wrap: wrap; 默認是不換行的 /* flex-wrap: nowrap; */

<!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>
        div{
            display:flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默認的子元素是不換行的， 如果裝不開，會縮小子元素的寬度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

image

11.內容水平垂直居中

flex-direction: column;

justify-content: center;

/* 我們需要一個側軸居中 */

/* 拉伸，但是子盒子不要給高度 */

/* align-items: stretch; */

align-items:center;

/* align-content: center; */

主要用來設置在側抽上的對齊方式

<!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>
                div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默認的主軸是 x 軸 row */
            flex-direction: column;
            justify-content: center;
            /* 我們需要一個側軸居中 */
            /* 拉伸，但是子盒子不要給高度 */
            /* align-items: stretch; */
            align-items:center;
            /* align-content: center; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
image

12.多行對齊方式

align-content:center;

主要是多行對齊方式：


<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 換行 */
            flex-wrap: wrap;
            /* 因為有了換行，此時我們側軸上控制子元素的對齊方式我們用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content:center;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

image

13.復合屬性

/* flex-direction: column;

            flex-wrap: wrap; */

/* 把設置主軸方向和是否換行（換列）簡寫 */

flex-flow: column wrap;

主要用於簡寫是有 flex-direction  flex-wrap 兩個屬性

<!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>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把設置主軸方向和是否換行（換列）簡寫 */
            flex-flow: column wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

image

14.flex子元素屬性

flex: 1; 主要表示該元素占幾份

<!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>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

image

15.子元素order和align-self

order: -1;表示交換位置跟之間的幾個原型進行位置交換。

align-self: flex-end; 當前元素的位置。


<!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>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 讓三個子盒子沿着側軸底側對齊 */
            /* align-items: flex-end; */
            /* 我們想只讓3號盒子下來底側 */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            /* 默認是0   -1比0小所以在前面 */
            order: -1;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

image


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端布局之Flex語法 前端布局神器display:flex 前端布局神器display:flex 前端（八）—— 高級布局：文檔流、浮動布局、流式布局、定位布局、flex布局、響應布局 flex布局 flex布局 Flex布局 flex布局 flex布局 Flex布局
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM