flex布局
flex布局极大的提高了我们布局的效率,更简单、灵活
![](https://i-blog.csdnimg.cn/blog_migrate/f454628c9be1e3442b6f620ea2f0c920.png)
语法:display:flex;一定要给父元素添加。
主轴对齐方式
![](https://i-blog.csdnimg.cn/blog_migrate/61eee942c8db08484fd0427fbb559e5f.png)
重点记住标红的。常用的是
justify-content: space-between;
显示效果 :两侧没缝隙
![](https://i-blog.csdnimg.cn/blog_migrate/6ce9816bd680bf2b700a75a19d62d748.png)
justify-content: space-around;
显示效果:按1:2进行排列
![](https://i-blog.csdnimg.cn/blog_migrate/6c25ac714f61614787b8a9db88cbe562.png)
justify-content: space-evenly;
显示效果:缝隙与两侧空隙按1:1进行排列
![](https://i-blog.csdnimg.cn/blog_migrate/0f736e32e4c4fa74ea0286f947e72945.png)
justify-content: center;
显示效果:经常用于让一个盒子水平居中
![](https://i-blog.csdnimg.cn/blog_migrate/e27655e2124c531eebe5852884cee8a5.png)
记忆:
两侧缝隙是between
缝隙一样大是evenly
2倍缝隙是around
小技巧:
![](https://i-blog.csdnimg.cn/blog_migrate/c36a2557c56d2eaa1ac55dcd32de8f0f.png)
见到这个效果,做简单的做法就是:给大盒子左右的padding,然后再加
justify-content: space-between
侧轴对齐方式
![](https://i-blog.csdnimg.cn/blog_migrate/792ac268f293e694727e367e02ed969d.png)
重点记住center,可以让元素垂直居中。
align-items: center;
我们可以通过flex让一个盒子水平和垂直居中。
![](https://i-blog.csdnimg.cn/blog_migrate/0751af44245f50af4eca7d0c3dffd505.png)
.father {
width: 500px;
height: 500px;
background-color: pink;
/* 设置为flex布局 */
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴垂直居中 */
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
伸缩比
把父盒子分为若干份数,每个子盒子各占几份。
flex:1; 一定给子盒子加
分配父级剩余的空间
语法:
flex: 1;
比如有一个父盒子里面有三个子盒子,每个子盒子写 flex:1; 此时每个子盒子各占三分之一。
.father {
display: flex;
height: 300px;
background-color: pink;
}
.father div {
/* 每个孩子各占1份 */
flex: 1;
/* 默认子盒子和父亲一样高 */
background: purple;
}
html 结构
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
显示效果:
![](https://i-blog.csdnimg.cn/blog_migrate/f77461d5dbc91bd4587cf2ad92ab97ea.png)
1.一定要给子盒子添加。
2.子盒子默认高度会和父盒子一样高。(前提是不给高度)
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索
![](https://i-blog.csdnimg.cn/blog_migrate/4fc6f876f02b1afbb6f9904fe5f36a12.png)
核心思路:
两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间
.top {
display: flex;
justify-content: c;
}
.top div:first-child {
width: 50px;
height: 50px;
background-color: red;
}
.top div:last-child {
width: 50px;
height: 50px;
background-color: red;
}
.top div:nth-child(2) {
flex: 1;
height: 50px;
background-color: pink;
}
注意点:中间flex: 1; 和 width 有冲突。 优先执行 flex:1;
设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
![](https://i-blog.csdnimg.cn/blog_migrate/4641d9cf793b4187ef99a48c17ceb83a.png)
语法:
flex-direction:column;
修改完毕,主轴是Y轴, 侧轴是X轴。
弹性盒子换行
特性: 给父亲添加了 display: flex; 所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。
语法:
flex-wrap: wrap;
![](https://i-blog.csdnimg.cn/blog_migrate/68f608c2a66af25b3fb9feff19ff26c7.png)
设置侧轴对齐方式
注意:
此处设置侧轴多行的垂直对齐方式。 align-content(少)
和前面学过的 align-items (侧轴单行垂直对齐) (多)
align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐
align-content:center;
![](https://i-blog.csdnimg.cn/blog_migrate/72a079b606809ad1ae66f981bc4b38fb.png)
小结:
在flex眼中,标签不再分类。
简单说就是没有块级元素,行内元素和行内块元素
任何一个元素都可以直接给宽度和高度一行显示
Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动
当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex
https://caniuse.com/ 可以查看兼容性