gpt4 book ai didi

html - 简单的 flex 问题 - 为什么 flex 元素的大小不一样,没有设置 flex 基础

转载 作者:行者123 更新时间:2023-11-28 14:06:03 28 4
gpt4 key购买 nike

<分区>

我想知道我是否真的正确理解了 flex-shrinkflex-grow。我试图理解为什么 flex child 的大小不一样。我只是希望能够将尽可能多的 flex 子项(即 .flex-item div)添加到包含的父 div 中,并让它们调整到彼此相同的宽度。在这种情况下,文本将其中之一的宽度推开。

如何在不添加硬编码的 flex-basis 的情况下解决这个问题?

任何解释都会很有帮助。感谢您的帮助。

#container {
display: flex;
justify-content: space-between;
width: 100%;
background: pink;
overflow: hidden; /* words should wrap anyway... */
}
.flex-item {
border: 1px solid red;
flex: 0 0 auto; /* should make flex items equal size */
word-wrap: break-all;
/* flex-basis: 0; makes flex items too narrow; they should stretch to fill width equally depending on no of flex items inside containing div. Also shouldn't require hard-coding the width */
}
<div id='container'>
<div class='flex-item'>
<p>ri bergber gyiruek weeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergerg</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruew</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wrgber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wg</p>
</div>
</div>

代码笔:https://codepen.io/anon/pen/JgRawo

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