天天看點
傳回

前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

9.垂直均分

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

/* 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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局

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>
前端布局之Flex布局
上一篇: 進來偷學一招，資料歸檔二三事兒
下一篇: 支付對賬系統序章：千萬級資料對賬怎麼這麼難？