Flex布局

.box{
    border: 1px black solid;
    width: 100px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
}
.item{
    border: 1px red solid;
    flex-basis: 100%;
    height: 30px;
}
<div class="box">
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

.box{
    border: 1px black solid;
    width: 100px;
    height: 100px;
    display: flex;
    /*flex-wrap: wrap;*/
}
.item{
    border: 1px red solid;
    flex-basis: 100%;
    height: 30px;
}
<div class="box">
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

两处代码区别仅在flex-wrap
故猜想flex-basis属性不能超出容器,即使设置为固定大小(如50px)

posted @ 2020-11-07 19:21  Zeronera  阅读(66)  评论(0)    收藏  举报