我想将 flexbox 中的元素放置为相同的宽度。
在 flexbox 中,我有一个 searchsvg、输入字段和带有一些文本的 div。我希望他们每个人都根据 flexbox 的宽度采用相同的宽度。我不想手动提供每个元素的宽度。我尝试使用 justify-content: space-evenly
。在这样做时,输入字段比其他字段占用更多的宽度。
如何避免?下面是代码:
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
@media (min-width: 300px) {
.items_container.expanded {
width: 50%;
}
}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<div>
<Svgsearch/>
</div>
<input type="text" placeholder="input" />
</div>
<div>dropdown to be added</div>
</div>
最佳答案
.child
元素应该增长
而不是收缩
.parent {
display: flex;
}
.child {
flex: 1 0 0;
}
/* ignore */
.child {
padding: 5px;
height: 50px;
background: lightcoral;
margin: 2px;
text-align: center;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
关于html - 如何将元素放置在 flexbox 中,宽度相等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55372027/