1. 基础样式
代码:
<!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>
html, body{
height: 100%;
margin: 0;
}
#container{
display: flex;
width: 500px;
height: 200px;
border: 1px solid #000;
}
#left{
width: 100px;
line-height: 200px;
text-align: center;
background-color: rgb(209, 238, 176);
}
#right{
width: 200px;
line-height: 200px;
text-align: center;
background-color: rgb(241, 141, 141);
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
结果:
2. flex:1
flex: 1 是由flex-grow、flex-shrink和flex-basis三个属性的缩写。
1. flex-grow
flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目。flex-grow设置的值为扩张因子,默认为0,剩余空间将会按照这个权重分别分配给子元素项目。
比如:父容器的宽度设置为500px,左边容器的宽度设置为100px,右边容器的宽度设置为200px,剩余空间为200px,假设左边容器设置flex-grow为2,右边容器设置flex-grow为3,那么左边容器的总宽度为100+200 * 2/(2+3)=180px,右边容器的总宽度为200+200 * 3/(2+3)=320px。
代码:
<!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>
html, body{
height: 100%;
margin: 0;
}
#container{
display: flex;
width: 500px;
height: 200px;
border: 1px solid #000;
}
#left{