css3弹性盒模型
介绍
弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。
- 主轴（main axis）
- 交叉轴（cross axis）
注意：生命display:flex 默认水平排列
弹性盒模型使用（父元素）
1. 创建基本代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
</style>
<body>
<div class="warp">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
</div>
<style type="text/css">
.warp{
height: 880px;
border: 20px solid antiquewhite;
}
.box{
height: 200px;
width: 200px;
color: white;
font-size: 40px;
}
.box-1{
background: #FAC863
}
.box-2{
background: #1B2B34
}
.box-3{
background: #2ecc71
}
</style>
</body>
</html>
2. 定义弹性模型
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
}
发现元素内部默认为水平居中
3. 水平居中
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平居中*/
justify-content: center;
}
4. 水平开始排列
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平开始排列*/
justify-content: flex-start;
}
5. 水平结尾排列
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平结尾排列*/
justify-content: flex-end;
}
6. 水平分散排列（占用开头）
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平平均排列*/
justify-content: space-between;
}
7. 水平分散排列（不占用开头，开头距离不均匀）
在.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平平均排列*/
justify-content: space-around;
}
8. 水平分散排列（不占用开头，开头距离均匀）
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*水平平均排列*/
justify-content: space-evenly;
}
9. 垂直
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*垂直*/
flex-direction: column;
}
10. 垂直居中
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*垂直排列*/
flex-direction: column;
/*居中*/
justify-content: center;
}
11.垂直水平居中（常用）
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*垂直排列*/
flex-direction: column;
/*居中*/
justify-content: center;
/*水平居中*/
align-items: center;
}
12.水平垂直居中（常用）
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*垂直居中*/
justify-content: center;
/*水平居中*/
align-items: center;
}
弹性盒模型使用（子元素）
1.如何保证子元素在自适应的时候样式不发生改变
.warp{
height: 880px;
border: 20px solid antiquewhite;
/*定义弹性模型*/
display: flex;
/*垂直居中*/
justify-content: center;
/*水平居中*/
align-items: center;
/*空间不足自动换行，不改变原有子元素样式*/
flex-wrap: wrap;
}
2.如何让子元素充分站满父元素空间？
.box-1{
background: #FAC863;
flex: 1;
}
3. 如何不修改标签顺序而改变标签顺序呢
.box-1{
background: #FAC863;
order: 3;
}
.box-2{
background: #1B2B34;
order: 2;
}
.box-3{
background: #2ecc71;
order: 1;
}
浙公网安备 33010602011771号