如何拉伸一行元素中的第一个元素[重复]答案

【问题标题】：how to stretch the first element in a row of elements [duplicate]如何拉伸一行元素中的第一个元素[重复]
【发布时间】：2020-06-09 22:09:12
【问题描述】：

.eltops {
   display: flex;
   background: #eee;
   color: white;
 }

 .elmark {
   background: blue;
 }

 .sbtn {
   background: green;
   border-right: 2px solid gold;
   padding: 0 9px;
 }

<div class='eltops'>
   <div class='elmark'></div>
   <div class='sbtn'>X</div>
   <div class='sbtn'>P</div>
 </div>
 <br>
 <div class='eltops'>
   <div class='elmark'></div>
   <div class='sbtn'>X</div>
   <div class='sbtn'>P</div>
   <div class='sbtn'>C</div>
 </div>

.eltops 是一行元素

.elmark 总是单身。它是空的（里面没有任何文本），应该在左侧并通过所有可用空间进行拉伸。

.sbtn 有不同的计数 (2-3-4-5)，应该在右侧

如何做到这一点，使用 flex 或 grid？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果您想将蓝色 div 扩展到全宽，您可以这样做。

.eltops {
  display: flex;
  background: #eee;
  color: white;
}

.elmark {
  background: blue;
  flex: 1;
}

.sbtn {
  background: green;
  border-right: 2px solid gold;
  padding: 0 9px;
}

<div class='eltops'>
  <div class='elmark'></div>
  <div class='sbtn'>X</div>
  <div class='sbtn'>P</div>
</div>
<br>
<div class='eltops'>
  <div class='elmark'></div>
  <div class='sbtn'>X</div>
  <div class='sbtn'>P</div>
  <div class='sbtn'>C</div>
</div>

【讨论】：

就是这样，非常感谢

【解决方案2】：

只需使用flex:1 或您认为合适的任何值，这将使.elmark 拉伸到可用的尺寸。

.eltops {
    display: flex;
    background: #eee;
    color: white;
}

.elmark {
    background: blue;
    flex: 1
}

.sbtn {
    background: green;
    border-right: 2px solid gold;
    padding: 0 9px;
}

<div class='eltops'>
    <div class='elmark'></div>
    <div class='sbtn'>X</div>
    <div class='sbtn'>P</div>
</div>
<br>
<div class='eltops'>
    <div class='elmark'></div>
    <div class='sbtn'>X</div>
    <div class='sbtn'>P</div>
    <div class='sbtn'>C</div>
</div>

【讨论】：

【解决方案3】：

只需进行此更改：

.elmark {
  background: blue;
  flex-grow: 1;
}

【讨论】：