CSS之flex布局详解
flex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
display: flex; 一定要给父盒子加。
flex主轴
flex主轴是水平方向来布局的一个参考线 常用的属性为
/* 默认对齐方式 左侧对齐 */
justify-content: flex-start;
/* 右侧对齐 */
justify-content: flex-end;
/* 中间对齐 经常用于让一个盒子水平居中*/
justify-content: center;
/* 中间的间隙是两侧的两倍 相当于每一个盒子有一个左右边距 记住2倍*/
justify-content: space-around;
/* 将盒子均匀分布在父盒子 显示效果：两侧没缝隙 */
justify-content: space-between;
/* 子盒子间隙均匀排列在父盒子上 空隙一样大 */
justify-content: space-evenly;
- 主轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
- 记忆：
- 两侧没缝隙是 between
- 缝隙一样大是 evenly
- 2倍缝隙是 around
- 水平居中是center
flex侧轴
flex侧轴是垂直方向来布局的一个参考线 常用属性为
.box {
width: 500px;
height: 400px;
background-color: pink;
display: flex;
/* 起始开始依次排列 */
align-items: flex-start;
/* 终点开始依次排列 */
align-items: flex-end;
/* 侧轴居中对齐 */
align-items: center;
/* 默认效果 没有高度时和父亲一样高 弹性盒子沿着侧轴线被拉伸至铺满容器 */
align-items: stretch;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
}
.son:nth-child(2) {
background-color: aqua;
}
- 侧轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
重点记住center 可以让盒子水平垂直居中
flex让子盒子在父盒子中实现水平垂直居中方法
<!DOCTYPE html>
<html lang="en">
<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>
* {
padding: 0;
margin: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
display: flex;
/* 主轴水平水平 */
justify-content: center;
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* 侧轴垂直对齐 */
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
伸缩比
把父盒子分为若干份，每一个子盒子各占几份。
flex:1;一定给子盒子加
分配父级盒子的剩余空间
语法：
flex:1;
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
核心思路：
- 两侧盒子写固定大小
- 中间盒子 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
背景图二倍/三倍做法
核心做法:
- 利用像素大厨里边选择2X或3X，再利用background-size缩放背景图片
- 测量坐标
具体缩放大小可以写为:
background-size：图片的宽（一般跟盒子一样大） auto;
改变默认主轴方向
改变主轴方向：flex-direction: column;
<style>
.box {
width: 600px;
height: 600px;
background-color: pink;
/* flex布局 */
display: flex;
/* 改变主轴方向 */
flex-direction: column;
/* 水平居中 侧轴 */
align-items: center;
/* 垂直居中 主轴 */
justify-content: center;
}
.box>div {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box div:first-child {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
弹性盒子换行
代码： flex-wrap: wrap;
<style>
.box {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
justify-content: space-between;
flex-direction: column;
flex-wrap: wrap;
}
.box div {
width: 150px;
height: 150px;
background-color: purple;
}
.box div:nth-child(2n) {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
小结
-
在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
-
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
-
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex
https://caniuse.com/ 可以查看兼容性
评论
0 评论
