网页某个节点flex布局需要设定第一个子项固定宽度左右0边距
可以通过以下方式实现:
-
给该节点设置 display: flex; 实现 flex 布局。
-
给第一个子项设置 flex-shrink: 0; 和 flex-basis: 固定宽度; 来固定宽度。
-
给第一个子项设置 margin-left: 0; 和 margin-right: 0; 来实现左右0边距。
示例代码:
<div class="flex-container">
<div class="fixed-width"></div>
<div class="flex-item"></div>
</div>
<style>
.flex-container {
display: flex;
}
.fixed-width {
flex-shrink: 0;
flex-basis: 100px; /* 固定宽度 */
margin-left: 0;
margin-right: 0;
}
.flex-item {
flex: 1;
}
</style>
原文地址: https://www.cveoy.top/t/topic/eakG 著作权归作者所有。请勿转载和采集!