gpt4 book ai didi

html - Flexbox 始终保持 100% 的外容器

转载 作者:行者123 更新时间:2023-11-27 23:11:41 24 4
gpt4 key购买 nike

<分区>

我在 flexbox 中有 5 列 div。问题是,随着屏幕变小,flexbox 开始超出白色容器。如果我希望所有列继续变小怎么办?为什么 flexbox 决定在某个时刻开始移动到外部容器之外,而不是继续变小?我该如何改变它,使它们不断变小?

JSFiddle

.container {
display: block;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
}

.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-left: -30px;
margin-right: -30px;
padding: 15px 0 60px;
}

.cat {
border: 1px solid black;
padding-left: 30px;
padding-right: 30px;
}
<div class="container">
<div class="row">
<div class="cat">
Hello
</div>
<div class="cat">
This is a group of flex columns
</div>
<div class="cat">
Isn't that interesting?
</div>
<div class="cat">
This is a group of flex columns
</div>
<div class="cat">
Isn't that interesting?
</div>
</div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com