*display: flex; 一定要给亲爸爸加。
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
justify-content: space-between;
显示效果:两侧没缝隙
justify-content: space-around;
效果如下: 记住2倍
justify-content: space-evenly;
效果如下: 记住空隙一样大
justify-content: center;
效果如下: 经常用于让一个盒子水平居中
记忆:
-
两侧没缝隙是 between
-
缝隙一样大是 evenly
-
2倍缝隙是 around
我们可以通过flex让一个子盒子水平和垂直居中
。
.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; }
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索
核心思路:
-
两侧盒子写固定大小
-
中间盒子 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眼中,标签不再分类。
-
简单说就是没有块级元素,行内元素和行内块元素
-
任何一个元素都可以直接给宽度和高度一行显示
-
-
Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动
-
当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex