CSS3 之 flex 布局-工具盒子

一、前言 {#一、前言}

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

二、布局原理 {#二、布局原理}

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

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

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

三、flex 中的概念 {#三、flex-中的概念}

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

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

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

四、flex 属性 {#四、flex-属性}

使用 flex 属性，首先父容器要设置 display: flex; 将自身容器变成弹性布局，之后才能使用其他属性。

4.1 flex-direction {#4.1-flex-direction}

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

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

演示

|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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/jquery@3.6.0/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 {#4.2-justify-content}

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

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

演示

|------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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/jquery@3.6.0/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 {#4.3-flex-wrap}

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

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

演示

|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!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/jquery@3.6.0/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 {#4.4-align-items}

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

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

演示

|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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/jquery@3.6.0/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 {#4.5-align-content}

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

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

演示

|---------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!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/jquery@3.6.0/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 {#4.6-flex-flow}

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

4.7 flex {#4.7-flex}

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

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

演示

|------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!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/jquery@3.6.0/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 {#4.8-align-self}

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

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

演示

|------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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/jquery@3.6.0/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 {#4.9-order}

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

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

演示

|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!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/jquery@3.6.0/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> |

运行