flex【弹性盒子】基础教程 - 原文来自阮一峰的博客！

时间：2021-07-09 12:55:03 阅读：18 评论：0 收藏：0 [点我收藏+]

Flex 布局教程：语法篇

技术分享图片

Flex 布局示例

.box { flex-direction: row 【横向，这个也是默认的方向！】| row-reverse【横向，元素倒序排列】 | column【纵向排列元素】 | column-reverse【纵向倒序排列元素】 }
未添加flex代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            width: 1000px;
            height: 500px;
            background-color: rgb(242,242,242)
        }
        div.tz {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<!--flex-direction属性决定主轴的方向（即项目的排列方向）。-->

<div class="test">
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
<!--    这个是行内元素-->
    <i>lvhanghmm</i>
</div>
</body>
</html>

为父元素添加display: flex属性可以看到变成弹性盒子，元素的默认排列

顺序就是横向的！
技术分享图片

之后添加flex-direction: column属性元素排列方向就变成了纵向了
技术分享图片
flex-direction: column-reverse【纵向倒序排列】

flex-direction: row-reverse;【横向倒序排列】
技术分享图片

2、flex-wrap 属性

示例代码：
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{ flex-wrap: nowrap【不换行】| wrap【换行】 | wrap-reverse;【换行倒序排列】 }

nowrap（默认）：不换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            display: flex;
            width: 1000px;
            height: 500px;
            background-color: rgb(242,242,242)
        }
        div.tz {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--flex-direction属性决定主轴的方向（即项目的排列方向）。-->

<div class="test">
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
</div>
</body>
</html>

wrap【换行】wrap：换行，第一行在上方。
技术分享图片

wrap-reverse【换行倒序排列】wrap-reverse：换行，第一行在下方。
技术分享图片

3、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box { flex-flow: || ; }
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            display: flex;
            flex-flow: row wrap;
            width: 1000px;
            height: 500px;
            background-color: rgb(242,242,242)
        }
        div.tz {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--flex-direction属性决定主轴的方向（即项目的排列方向）。-->
<div class="test">
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
</div>
</body>
</html>

技术分享图片

4、justify-content 属性

justify-content属性定义了项目在主轴上的对齐方式。

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

flex-start（默认值）：左对齐
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            display: flex;
            justify-content: flex-start;
            width: 1000px;
            height: 500px;
            background-color: rgb(242,242,242)
        }
        div.tz {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--flex-direction属性决定主轴的方向（即项目的排列方向）。-->
<div class="test">
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
</div>
</body>
</html>

flex-end：右对齐
技术分享图片

技术分享图片

center：居中【水平居中】
技术分享图片

space-between：两端对齐，项目之间的间隔都相等。
技术分享图片

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
技术分享图片

5、align-items 属性

align-items属性定义项目在交叉轴上如何对齐。【解释一下：交叉点指的是父元素左上角和左下角的十字架的两个点，左上角是起点，左下角是终点】

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

flex-start：交叉轴的起点对齐。【酶反应！？!!!】
示例代码：

<!DOCTYPE html>
<html lang="en">
<headw>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            display: flex;
            align-items: flex-start;
            width: 1000px;
            height: 500px;
            background-color: rgb(242,242,242)
        }
        div.tz {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--flex-direction属性决定主轴的方向（即项目的排列方向）。-->
<div class="test">
    <div class="tz">1</div>
    <div class="tz">2</div>
    <div class="tz">3</div>
    <div class="tz">4</div>
</div>
</body>
</html>

技术分享图片