1.父盒子没有高度,依子盒高度为准
<style>
.wrap{
display: flex;
width: 80%;
/* background-color: pink; */
/* height: 300px; */
}
.item{
height:200px;
flex:1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item" style="background:red;">1</div>
<div class="item" style="background:green;">2</div>
<div class="item" style="background:red;">3</div>
</div>
</body>
效果图如下:
2.子盒子没有高度,默认子元素对齐方式为:align-items:stretch. 这样的效果如下图:会拉伸。
如果子盒子有高度,又设置了align-items:stretch. 将不会被拉伸
<style>
.wrap{
display: flex;
width: 80%;
background-color: pink;
height: 300px;
/* align-items: stretch; */
}
.item{
width:100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item" style="background:red;">1</div>
<div class="item" style="background:green;">2</div>
<div class="item" style="background:red;">3</div>
</div>
</body>
效果图如下:
3. 紧接上述2, 如果设置了align-items:flex-start,将会以具体填充内容的高度为准 。
4.flex布局中,默认不换行,如果一行装不下,会缩小子元素的宽度。也就是:flex-wrap:no-wrap
<style>
.wrap{
display: flex;
width: 600px;
background-color: pink;
height: 300px;
align-items: flex-start;
}
.item{
width:200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item" style="background:red;">1</div>
<div class="item" style="background:green;">2</div>
<div class="item" style="background:red;">3</div>
<div class="item" style="background:green;">4</div>
</div>
</body>