一、前言
flex 是 flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定 flex 布局。
二、布局原理
采用 flex 布局的元素成为 flex 容器。其所有子元素会自动成为容器成员,成为 flex 项目。
通过给 flex 容器添加 flex 属性来控制 flex 项目的位置和排列方式。
注意:当父盒子设置为 flex 布局后,其子元素的 float、clear 和 vertical-align 属性会失效。
三、flex 中的概念
在 flex 布局中,分为主轴和侧轴两个方向。
默认情况下,主轴为 x 轴方向,水位向右。
默认情况下,侧轴为 y 轴方向,垂直向下。
四、flex 属性
使用 flex 属性,首先父容器要设置 display: flex;
将自身容器变成弹性布局,之后才能使用其他属性。
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
作用:设置主轴上的子项目排列方式
设置范围:父容器
属性值
属性值 | 说明 |
---|
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
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
作用:设置侧轴上的子项目的排列方式(单行)
设置范围:父容器
属性值
属性值 | 说明 |
---|
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
作用:设置侧轴上的子项目的排列方式(多行)
设置范围:父容器
属性值
属性值 | 说明 |
---|
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.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
属性值 | 说明 |
---|
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
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>
|
五、参考资料
CSS参考手册