将剩余容器空间分配给单个弹性项目

Question

假设我有一个flex容器，它包含完全占用容器空间的子容器。

.container {
display: flex;
width: 150px;
}
.item {
flex: 1 1 50px;
border: 1px solid blue;
}

<div class="container">
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
</div>
</div>

点击后，我想在不收缩其他块的情况下，为项目编号2添加额外的空间。其想法是将额外的空间添加到容器的宽度中，理想情况下，将此空间仅分配给单击的项目。然而，我不确定是否可以通过flexbox仅为单个弹性项目分配额外的空间。

p.S我需要调整项目的大小，因此项目需要将flex grow设置为1。

Answer 1

如果允许它们增长和收缩，您可能不想设置flex基值并将其保留为auto。

任何子项都可以通过宽度或最小宽度或弹性增长来调整大小。

这里是一个将这3条规则和flex基础设置为auto的示例。

* {
box-sizing: border-box;
}
body {
display: flex;
gap: 1em;
}
.container {
display: flex; 
width: 150px;
}
.item {
flex: 1 1 auto;  
border: 1px solid blue; 
}
.item:focus { 
border-color:red
}
.width .item:focus {
width: 66.66%; 
}
.min-width .item:focus {
min-width: 66.66%;
border-color:yellow
}

.grow-4 .item:focus {
flex-grow:4;/* 4 , the 2 other elements use 2 . 4/6=66% */
border-color:hotpink
}

<div class="container width">
<div class="item" tabindex="0">
<p>1</p>
</div>
<div class="item" tabindex="0">
<p>2</p>
</div>
<div class="item" tabindex="0">
<p>3</p>
</div>
</div><div class="container min-width">
<div class="item" tabindex="0">
<p>1</p>
</div>
<div class="item" tabindex="0">
<p>2</p>
</div>
<div class="item" tabindex="0">
<p>3</p>
</div>
</div><div class="container grow-4">
<div class="item" tabindex="0">
<p>1</p>
</div>
<div class="item" tabindex="0">
<p>2</p>
</div>
<div class="item" tabindex="0">
<p>3</p>
</div>
</div>

为了避免收缩：不要将柔性收缩值设置为1，而是0，并允许包装或溢出？flex基础可以自己完成这项工作，flex增长甚至可以重置为0。

* {
box-sizing: border-box;
}
body {
display: grid;
gap: 1em;
}
.container {
display: flex; 
width: 150px;
background:silver

}
.container + .container {flex-wrap:wrap;}
.item {
flex: 0 0 33.33%;  
border: 1px solid blue; 
}
.item:focus { 
border-color:red;
flex-basis: 66.66%; 
}

<div class="container">
<div class="item" tabindex="0">
<p>1</p>
</div>
<div class="item" tabindex="0">
<p>2</p>
</div>
<div class="item" tabindex="0">
<p>3</p>
</div>
</div>
<div class="container">
<div class="item" tabindex="0">
<p>1</p>
</div>
<div class="item" tabindex="0">
<p>2</p>
</div>
<div class="item" tabindex="0">
<p>3</p>
</div>
</div>