CSS/Flexbox：列のような最大要素と同じ幅

Question

私は自分のアプリのリストコンポーネントを構築しました。スタイルのためにテーブルを使用することはできません。

「行」の内側の要素を、列のように上から下に同じ幅にしたいと考えています。コードは次のようになります。

<div class="row"> 
    <div class"element>iPhone </div> 
    <div class"element>Buy an iPhone now!</div> 
</div> 
<div class="row"> 
    <div class"element>Airport Express </div> 
    <div class"element>Buy an Airport Express now!</div> 
</div> 
<div class="row"> 
    <div class"element>iPad </div> 
    <div class"element>Buy an iPad now!</div> 
</div> 

これは、それが現在のようになります。

そして、これは私が欲しいもの、である：

がありますこれを行う方法？

Answer 1

使用CSSのテーブルを持つことができます：細胞内border-spacing

国境と行の間

• 分離。 border-radiusを使用して丸めることができます。
• 右の利用可能なスペースを埋めるためにセルとして表示される疑似要素
• white-space: nowrap疑似要素によるセルの縮小を防ぐために、疑似要素がセルとして表示されます。

.wrapper { 
 
    display: table; 
 
    border-spacing: 0 10px; 
 
} 
 
.row { 
 
    display: table-row; 
 
    border: 1px solid; 
 
} 
 
.row::after { 
 
    content: ''; 
 
    display: table-cell; 
 
    width: 100%; 
 
    border: 1px #6AACC9; 
 
    border-style: solid none; 
 
} 
 
.element { 
 
    display: table-cell; 
 
    border: 1px solid #6AACC9; 
 
    border-right-color: #adadad; 
 
    border-left-style: none; 
 
    padding: 5px; 
 
    white-space: nowrap; 
 
} 
 
.element:first-child { 
 
    border-left-style: solid; 
 
    border-radius: 5px 0 0 5px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <div class="element">iPhone </div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">Airport Express </div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">iPad </div> 
 
    <div class="element">Buy an iPad now!</div> 
 
    </div> 
 
</div>

Answer 2

フレックスボックスではできません。親を共有しない要素間で次元を等しくすることはできません。

しかし、あなたはCSSテーブル

.row { 
 

 
    display: table-row; 
 

 
} 
 

 
.element { 
 

 
    display: table-cell; 
 

 
    border: 1px solid grey; 
 

 
    padding: 8px; 
 

 
}

<div class="row"> 
 
    <div class="element">iPhone</div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">Airport Express</div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">iPad</div> 
 
    <div class="element">Buy an iPad now!</div> 
 
</div>