flex布局——弹性布局
传统布局: 浮动 定位 行内块等
1. flex布局 方法简单 不需要计算 能自动分配父级里面的子元素排版 对齐方式等等
>flex布局 可以适应不同屏幕布局
2. flex布局使用
- 给父级盒子 display: flex 开启弹性盒模型
- 子元素就会默认按照flex规范 来进行横向排列
- 子元素不设置高度 默认是占满父级盒子的高
子元素加起来的宽度 大于 父级盒子的宽时 不会超出 也不会换行 (父级: 1000 < 子总宽: 1200)
(子元素默认不会换行 按照flex规范 进行了等比例的缩放 300 现在变成 250 )
- 行内元素 在父级flex里面 可以支持高宽设置 没写高默认是按flex规范来分配 高不写默认占满整个父级高度 宽度 是由内容来决定的
3. flex布局属性
1.display: flex 开启弹性盒模型
2.flex-wrap: 控制子元素是否需要换行 默认不换行 nowrap
3.flex-direction 控制主轴方向 规定子元素排列方式
4.flex-flow 主轴方向和换行 复合写法
5.justify-content 控制子元素在主轴对齐方式 x轴
6.align-items 控制子元素在侧轴对齐 y轴
7.align-content 控制子元素行与行之间对齐
示例1——x轴对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.wrap{
display: flex;
flex-wrap: wrap;
/* 控制子元素在主轴的对齐方式 默认 左对齐 从主轴的起点位置开始 */
justify-content: flex-start;
/* 右对齐 主轴终点位置 */
justify-content: flex-end;
/* 子元素在主轴 居中对齐 */
justify-content: center;
/* 子元素两端对齐 中间的间隔均分 */
justify-content: space-between;
/* 子元素间隔相同 左右间隔相等 中间间隔会比外面的大一倍 中间间隔是两个递加在一起 平分一下 */
justify-content: space-around;
/* 所有子元素间隔平均分配 */
justify-content: space-evenly;
width: 1000px;
height: 500px;
border: 2px solid red;
}
.wrap>p{
width: 260px;
height: 230px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="wrap">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</body>
</html>效果：
示例2——控制子元素行与行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.list{
display: flex;
/* 子元素换行 */
flex-wrap: wrap;
/* 子元素间隔均分相等 */
justify-content: space-evenly;
/* 行与行之间对齐 起点位置对齐 上下行就没有间隔 */
/* align-content: flex-start; */
/* 副轴 终点对齐 底部对齐 */
align-content: flex-end;
/* align-items: flex-end; */
/* 行与行之间 居中对齐 */
align-content: center;
/* 每行间隔平均分配 */
align-content: space-around;
/* 两端对齐 中间间隔均分 */
align-content: space-between;
/* 每行间隔相等 */
align-content: space-evenly;
width: 1000px;
height: 700px;
background-color: pink;
margin: auto;
}
.list>li{
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>效果：
子元素属性:
- order: 子元素展示顺序 值越小越优先 默认0
- flex-shrink 子元素在主轴不足 缩放比例 默认是1
- flex-grow 在主轴还有剩余空间 给子元素分配剩下的空间 增大子元素 默认是0
- align-self 规定子元素 自身在y轴的对齐方式 默认是继承父级align-items
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
display: flex;
width: 700px;
height: 500px;
background-color: pink;
}
.box1{
/* order: 子元素展示顺序 默认0 */
order: 1;
/* 在主轴还有剩余空间 给子元素分配剩下的空间 增大子元素 默认是0 */
flex-grow: 1;
width: 200px;
height: 350px;
background-color: red;
}
.box2{
/* 缩放比例 默认为1 */
flex-shrink: 1;
width: 200px;
/* width: 350px; */
height: 400px;
background-color: green;
align-self: center;
}
.box3{
order: -1;
/* 规定子元素 自身在y轴的对齐方式 默认是继承父级align-items*/
align-self: flex-end;
flex-grow: 1;
width: 200px;
height: 200px;
background-color: skyblue;
}
.box4{
width: 200px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<div class='box1'>1</div>
<div class='box2'>2</div>
<div class='box3'>3</div>
<!-- <div class='box4'>4</div> -->
</div>
</body>
</html>效果：
