开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
对比传统布局技术和flex布局的优点和缺点
flex布局
- 优点：简单和方便
- 缺点:兼容性没有旧布局技术好
传统布局
- 优点：兼容性好
- 缺点：繁琐
flex体验- 子元素的水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
background-color: aqua;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
初始状态
-
父项的布局不受
display:flex的影响 -
子项
- 可以直接加宽度和高度
- 一般不出现 定位 浮动 和左右
margin - 默认宽度 = 内容撑开 默认的高度 = 父项的高度
-
孙元素 以前是什么标签 一样是什么标签 不受父项和子项影响
父项 - 父元素
在flex布局中 存在两个轴
- 主轴 方向 默认 水平从左右
- 侧轴 方向 默认是 垂直上到下
设置主轴的方向
flex-direction
row水平左到右column上到下
设置主轴-子项的对齐方式
justify-content:
-
左对齐
flex-start -
右对齐
flex-end -
居中
center -
先两边 子项平分空间
space-betweensb
-
子项平分空间
space-aroundsd
侧轴子项的对齐方式 单行
align-items
flex-start上对齐flex-end下对齐center垂直居中
父项-主轴子项换行
flex-wrap:wrap;
父项-侧轴子项的对齐方式多行
align-content
- flex-start
- flex-end
- center
- sb space-between
- sd space-around
小结
-
设置主轴或者侧轴的方向
flex-direction: row; column; -
设置主轴 子项的对齐方式
justify-content: flex-start;flex-end;center;space-between ;space-around; -
设置 侧轴 子项的对齐方式 单行
align-items: flex-start;flex-end;center; -
设置 侧轴 子项的对齐方式 多行
align-content: flex-start;flex-end;center;space-between ;space-around; -
换行 属性
flex-wrap:wrap;
