伸缩比:占的是父盒子的宽度,把他分成了等份
flex:1; 一定给子盒子加
分配父级剩余的空间
写个案例:写四个小盒子,第二个和第四个占其他的两倍
示意图:
代码:
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
height: 400px;
background-color: pink;
margin: 100px auto;
/* 弹性容器 */
display: flex;
}
/* 弹性盒子 */
.box>div {
/* 伸缩比,占的是父盒子的宽度,把他分成了等份 */
flex: 1;
margin-right: 15px;
background-color: aqua;
}
.box>div:nth-child(2n) {
flex: 2;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
圣杯布局:
意思:2边固定宽高,中间自适应
注意:很常用,尤其是导航栏
思路:
-
两侧盒子写固定大小
-
中间盒子 flex: 1; 占满剩余空间
案例示意图:
代码:
<style>
* {
margin: 0;
padding: 0;
}
.search {
width: 100%;
height: 50px;
background-color: pink;
/* 弹性容器 */
display: flex;
}
.search .left {
width: 50px;
height: 50px;
background-color: aqua;
}
.search .center {
flex: 1;
background-color: red;
}
.search .right {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<!-- 圣杯布局,2边固定宽高,中间自适应 -->
<div class="search">
<div class="left">左边</div>
<div class="center">中间的内容</div>
<div class="right">右边</div>
</div>
</body>
</html>