だから私は単にいくつかのdivをレイアウトし、固定幅やその他のリフロー可能なコンテンツを作成しようとしています。
たとえば、上の画像は最小幅の構成を示しています。下の画像は、ウィンドウを拡大するとどうなるかを示しています。実際、ほとんどのアイテムは右または左に固定されていますが、拡大するのは1つの入力だけです。
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 15px;
font-size: 12px;
}
<div class="flex-container">
<div style="flex-grow: 1">
<div class="flex-container">
<div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
<div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
<div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
</div>
<div class="flex-container">
<div style="flex-grow: 0; flex-shrink: 0">Some label</div>
<div style="flex-grow: 1;">An Input</div>
<div style="flex-grow: 0; flex-shrink: 0">Btn</div>
</div>
</div>
<div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>
2番目の画像は、フレックスがどのように機能するかについての誤解を示しています。フレックスは、コンテナを満たすために伸びます。したがって、2番目の画像は使用できません。
2番目の画像の最初の行はフロートレイアウトのように見えます。フレックスで同じことを実現するには、空白を埋めるが、表示されるコンテンツがない空の要素を追加する必要があります。
<div class="flex-container">
<div style="flex-grow: 1">
<div class="flex-container">
<div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
<!-- Adding a "spacer" solves the issue -->
<div style="flex-grow: 1;"></div>
<div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
<div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
<div style="flex-grow: 0; flex-shrink: 0">An Input</div>
</div>
<div class="flex-container">
<div style="flex-grow: 0; flex-shrink: 0">Some label</div>
<div style="flex-grow: 1;">An Input</div>
<div style="flex-grow: 0; flex-shrink: 0">Btn</div>
</div>
</div>
<div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加