弹性盒模型与三栏布局
作者：互联网
弹性盒模型：多用于移动端布局，弹性盒中float、clear不生效
父元素上的属性：开启弹性盒模型 display：flex； 子元素默认水平排列
设置弹性盒方向 flex-direction: ；
row：默认值 子元素水平排列
column：子元素垂直排列
row-reverse：子元素水平方向倒序排列
colum-reverse：子元素垂直方向上倒序排列
设置子元素在主轴的对齐方式 ：
默认，x轴是主轴，y是侧轴
当flex-direction：column； y轴为主轴，x轴为侧轴
justify-content：；
flex-start 默认值 弹性盒的开始
flex-end 弹性盒的结果
center 居中
space-between 子元素之间平均分配父元素剩余的距离
设置子元素在侧轴的对齐方式：
align-items：；
flex-start弹性盒开始
flex-end 弹性盒的结束
center居中
- 子元素上的属性
flex-grow：number；
设置子元素宽度之间的比例，分配父元素剩下的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100%;
background-color: pink;
display: flex;
/*flex-direction: column;*/
/*justify-content: center;*/
/*align-items: center;*/
}
.one,.two,.three{
width: 200px;
height: 200px;
}
.one{
background-color: blue;
flex-grow: 3;
}
.two{
background-color: red;
flex-grow: 2;
}
.three{
background-color: palegreen;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
三栏布局：左侧两侧宽度规定，中间的宽度跟着浏览器的缩放而缩放。
css部分
.nav{
width: 100%;
height: 75px;
background-color: red;
display: flex;
}
.arrow{
width: 75px;
height: 75px;
background-color: green;
}
.search{
width: 75px;
height: 75px;
background-color: #98FB98;
}
.title{
height: 75px;
background-color: #0000FF;
flex-grow: 1;
}
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="123.css">
</head>
<body>
<div class="nav">
<div class="arrow"></div>
<div class="title"></div>
<div class="search"></div>
</div>
</body>
</html>
标签：flex,三栏,color,模型,元素,弹性,background,75px 来源： https://blog.csdn.net/abc219365/article/details/120253092