CSS3 之 flex 布局

flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定 flex 布局。

二、布局原理

采用 flex 布局的元素成为 flex 容器。其所有子元素会自动成为容器成员，成为 flex 项目。

通过给 flex 容器添加 flex 属性来控制 flex 项目的位置和排列方式。

注意：当父盒子设置为 flex 布局后，其子元素的 float、clear 和 vertical-align 属性会失效。

三、flex 中的概念

在 flex 布局中，分为主轴和侧轴两个方向。

默认情况下，主轴为 x 轴方向，水位向右。

默认情况下，侧轴为 y 轴方向，垂直向下。

四、flex 属性

4.1 flex-direction

作用：设置主轴的方向
设置范围：父容器

属性值	说明
row	默认值，从左到右，主轴为 x 轴
row-reverse	从右往左，主轴为 x 轴
column	从上到下，主轴为 y 轴
column-reverse	从下到上，主轴为 y 轴

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3</span>
    </div>
    <div class="option">
        <h3>flex-direction：<span id="curVal">row</span></h3>
        <ul>
            <li><button data-val="row">row</button></li>
            <li><button data-val="row-reverse">row-reverse</button></li>
            <li><button data-val="column">column</button></li>
            <li><button data-val="column-reverse">column-reverse</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".parent").css({"flex-direction": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.2 justify-content

作用：设置主轴上的子项目排列方式
设置范围：父容器

属性值	说明
flex-start	默认值，从头部开始，如果主轴为 x 轴，则从左到右
flex-end	从尾部开始
center	在主轴居中对齐，如果主轴为 x 轴，水平居中
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3</span>
    </div>
    <div class="option">
        <h3>justify-content：<span id="curVal">flex-start</span></h3>
        <ul>
            <li><button data-val="flex-start">flex-start</button></li>
            <li><button data-val="flex-end">flex-end</button></li>
            <li><button data-val="center">center</button></li>
            <li><button data-val="space-around">space-around</button></li>
            <li><button data-val="space-between">space-between</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".parent").css({"justify-content": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.3 flex-wrap

作用：设置子项目是否换行
设置范围：父容器

属性值	说明
nowrap	默认值，不换行
wrap	换行

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3</span>
        <span class="child">4</span>
        <span class="child">5</span>
        <span class="child">6</span>
        <span class="child">7</span>
    </div>
    <div class="option">
        <h3>flex-wrap：<span id="curVal">nowrap</span></h3>
        <ul>
            <li><button data-val="nowrap">nowrap</button></li>
            <li><button data-val="wrap">wrap</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".parent").css({"flex-wrap": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.4 align-items

作用：设置侧轴上的子项目的排列方式（单行）
设置范围：父容器

属性值	说明
stretch	默认值，拉伸，当子项目高度为 auto 时生效
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3</span>
    </div>
    <div class="option">
        <h3>align-items：<span id="curVal">stretch</span></h3>
        <ul>
            <li><button data-val="stretch">stretch</button></li>
            <li><button data-val="flex-start ">flex-start </button></li>
            <li><button data-val="flex-end">flex-end</button></li>
            <li><button data-val="center">center</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".parent").css({"align-items": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.5 align-content

作用：设置侧轴上的子项目的排列方式（多行）
设置范围：父容器

属性值	说明
stretch	默认值，拉伸
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
space-around	子项目在侧轴平分剩余空间
space-between	子项目在侧轴先两边贴边，再平分剩余空间

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3</span>
        <span class="child">4</span>
        <span class="child">5</span>
        <span class="child">6</span>
        <span class="child">7</span>
    </div>
    <div class="option">
        <h3>align-content：<span id="curVal">stretch</span></h3>
        <ul>
            <li><button data-val="stretch">stretch</button></li>
            <li><button data-val="flex-start ">flex-start </button></li>
            <li><button data-val="flex-end">flex-end</button></li>
            <li><button data-val="center">center</button></li>
            <li><button data-val="space-around">space-around</button></li>
            <li><button data-val="space-between">space-between</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".parent").css({"align-content": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.6 flex-flow

作用：复合属性，相当于同时设置 flex-direction 和 flex-wrap。
设置范围：父容器

4.7 flex

作用：子项目占的份数
设置范围：子项目

属性值	说明
none	其计算值为 0 0 auto
1	其计算值为 1 1 0%
auto	其计算值为 1 1 auto

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3 测试盒子</span>
    </div>
    <div class="option">
        <h3>flex：<span id="curVal">none</span></h3>
        <ul>
            <li><button data-val="0 0 auto">none</button></li>
            <li><button data-val="1 1 0%">1</button></li>
            <li><button data-val="1 1 auto">auto</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".child").eq(2).css({"flex": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.8 align-self

作用：控制子元素在侧轴的排列方式，可覆盖 align-items 属性
设置范围：子项目

属性值	说明
auto	默认值，以父元素的'align-items' 为准
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸，子项目高度为 auto 时生效

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3 测试盒子</span>
    </div>
    <div class="option">
        <h3>align-self：<span id="curVal">auto</span></h3>
        <ul>
            <li><button data-val="auto">auto</button></li>
            <li><button data-val="flex-start">flex-start</button></li>
            <li><button data-val="flex-end">flex-end</button></li>
            <li><button data-val="center">center</button></li>
            <li><button data-val="stretch">stretch</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".child").eq(2).css({"align-self": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

4.9 order

作用：定义子项目的排列方式，数值越小越靠前，默认值 0
设置范围：子项目

属性值	说明
任意数值	可以为负数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        * {margin: 0;padding: 0;}  .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
        .child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
        .option {width: 600px;height: 100px;margin: 0 auto;}  .option ul {list-style: none;margin-top: 20px;}
        .option ul li {margin-bottom: 10px;}  .option button {width: 120px;height: 32px;}
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
        <span class="child">3 测试盒子</span>
    </div>
    <div class="option">
        <h3>order：<span id="curVal">0</span></h3>
        <ul>
            <li><button data-val="0">0</button></li>
            <li><button data-val="-1">-1</button></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
           $("button").on("click", function() {
              let val = $(this).data("val");
              $(".child").eq(2).css({"order": val});
              $("#curVal").text(val);
           });
        });
    </script>
</body>
</html>

五、参考资料

CSS参考手册

二、布局原理

三、flex 中的概念

四、flex 属性

4.1 flex-direction

4.2 justify-content

4.3 flex-wrap

4.4 align-items

4.5 align-content

4.6 flex-flow

4.7 flex

4.8 align-self

4.9 order

五、参考资料

Recommend

LeetCode 刷多少题能进大厂面试?

Which M2 Pro Mac Mini? 12core? 32GB? 1TB?

当众多App开通了自动续费

公链Conflux获DWF Labs 1000万美元投资

Linux 系统零拷贝--什么是零拷贝以及零拷贝实现原理

OpenAI announces an API for ChatGPT and its Whisper speech-to-text tech

BlackLotus UEFI bootkit: Myth confirmed

Netflix Built a Scalable Annotation Service Using Cassandra, Elasticsearch and I...

How to transition away from Google Ads similar audience segments

奔驰沃尔沃看好的激光雷达：测距突破300米！

About Joyk