广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
本篇文章带大家了解一下CSS3中的Flex布局，希望对大家有所帮助！
简介什么是Flex布局Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成：
flex容器（flex container）flex项（flex items）主轴（main axis）交叉轴（cross axis）Flex布局的作用在flex布局未出现前，网页布局的方式为标准流，浮动，定位等。在解决比较复杂的问题相对麻烦。【学习视频分享：css视频教程、web前端】
而flex布局可以：
在使用flex布局之前首先定义 Flex 容器。
display:flex;登录后复制
定义 Flex 容器后可以使用相应的属性， 改变子元素的布局方式，让子元素可以自动的挤压或拉伸。
相应属性：
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性登录后复制1. justify-content
容器的justify-content属性可以设置子元素在主轴方向的对齐方式。（记得先display:flex;定义容器）
justify-content: center;//居中对齐登录后复制
justify-content: space-between;//间距在子元素之间登录后复制
justify-content: space-evenly;//主轴方向所有地方的间距都相等登录后复制
justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）登录后复制
代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>主轴对齐方式</title> <style> * { margin: 0; padding: 0; } .box { display: flex; /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-evenly; */ justify-content: space-around; height: 200px; margin: auto; border: 1px solid #000; } .box div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body></html>登录后复制2. align-items容器的align-items属性可以设置子元素在交叉轴方向的对齐方式。
由此我们可以设置将容器属性justify-content和 align-items 设置为居中，让元素实现完美居中。
align-items: center;//居中登录后复制
align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)登录后复制
align-items: flex-start;//将子元素在容器顶部对齐登录后复制
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性0登录后复制
代码：
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性1登录后复制3. flex-direction
容器的flex-direction属性可以改变flex布局的主轴方向。flex主轴方向默认为水平向右方向。如果修改主轴方向，那么交叉轴方向也会与之改变。
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性2登录后复制
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性3登录后复制
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性4登录后复制
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性5登录后复制
修改主轴方向后实现垂直居中：
display:flex;flex-direction: column;justify-content: center;登录后复制4. flex-wrap
当定义flex容器之后，如果子元素过多超出主轴方向宽度，容器内的子元素会自动伸缩。 如：
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性7登录后复制
解决：容器的flex-wrap属性可以让超出容器主轴方向的子元素换行显示。
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性8登录后复制
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性9登录后复制5. align-content
容器的align-content属性可以调节子元素行的对齐方式（需要先设置换行之后）。
justify-content: center;//居中对齐0登录后复制
前三者的属性跟主轴对齐方式一样就不再赘述。
justify-content: center;//居中对齐1登录后复制6.flex-flow
flex-flow属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
justify-content: center;//居中对齐2登录后复制Flex项（子元素）属性
我们可以设置相应属性让flex 容器的直接子元素成为弹性（flex）项目。（在使用flex布局之前首先定义 Flex 容器。）
相应属性：
justify-content: center;//居中对齐3登录后复制1. flex-grow
使用flex-grow属性来定义弹性盒子内部子元素的放大比例（当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间）。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ /* 没有设置宽度 */ background:red; flex-grow: 1; } .box2{ background:blue; flex-grow: 2; } .box3{ background:orange; flex-grow: 1; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body></html>登录后复制2. flex-shrink使用flex-shrink属性来定义弹性盒子内部子元素的缩小比例（当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度）。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; flex-shrink: 1; } .box2{ width: 100px; background:blue; flex-shrink: 2; } .box3{ width: 100px; background:orange; flex-shrink: 1; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body></html>登录后复制3. flex-basis使用flex-basis属性来设置子元素的宽度，默认值为auto（作用跟width一样,优先级比width高，就算width在后面也会显示flex-basis）。
使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性，flex属性就是一个复合属性。 实际应用一般用复合属性。 语法：
justify-content: center;//居中对齐6登录后复制5. align-self
使用align-self属性设置子元素项目的对齐方式。
注意：align-self属性会覆盖容器的 align-items 属性所设置的对齐方式。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; align-items: center; border: 1px solid #000; } .box1{ width: 100px; height: 50px; background:red; align-self: flex-start; } .box2{ width: 100px; height: 50px; background:blue; } .box3{ width: 100px; height: 50px; background:orange; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body></html>登录后复制6. order使用order属性来定义子元素的排列顺序。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; order: 2; } .box2{ width: 100px; background:blue; order: 1; } .box3{ width: 100px; background:orange; order: 3; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body></html>登录后复制更多编程相关知识，请访问：编程视频！！
以上就是一文详解CSS3中的Flex布局的详细内容，更多请关注9543建站博客其它相关文章！
发表评论