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

Posted 2023-03-05

【中文标题】如何拉伸一行元素中的第一个元素[重复]

【英文标题】：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？

【参考方案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;