flex 弹性盒子元素自适应占满一行/列
有时候我们想要这样的效果:
一些子元素固定宽或者是高,另外的子元素希望自动占满一行或者是一列
重点:子元素属性 flex :auto;
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒</title>
</head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
}
.flex-item1 {
background-color: red;
height: 100px;
/* align-self: stretch; */
flex: auto;
}
.flex-container1 {
height: 300px;
width: 100%;
display: flex;
flex-direction: column;
}
.flex-container1 div {
width: 100%;
}
.flex-item2 {
height: 70px;
background-color: skyblue;
}
.flex-item21 {
flex: auto;
background-color: tomato;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item1">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container1">
<div class="flex-item2">flex item 1</div>
<div class="flex-item21">flex item 2</div>
<div class="flex-item2">flex item 3</div>
</div>
</body>
</html>