フレックスボックス：空の第1列の列グリッド

Question

第2行の項目が第2列と整列する2列グリッドを整列することは可能ですか？これはテキストで説明するのが難しいので、私が目指していることを描きました。

​​

理想的には、私はJS経由

• 何のスワッピングCSSクラスを好むないだろう。
• ラベルはmax-widthですが、その時点まで成長します。

Answer 1

これには、flexboxが含まれていない可能性のある回答が2つあります。

1. display: table-row
2. CSSグリッド

.tableContainer { 
 
    display: table-row; 
 
    background: red; 
 
} 
 
input { 
 
    background: yellow; 
 
} 
 
label { 
 
    background: aquamarine; 
 
} 
 
.inputLabel { 
 
    display: table-cell; 
 
} 
 
.error { 
 
    font-size: smaller; 
 
    font-style: italic; 
 
    display: table-row; 
 
} 
 

 
/* */ 
 

 
inputLabel_GridItem, 
 
.error_GridItem { 
 
    display: initial; 
 
} 
 

 
.inputLabel_GridItem { 
 
    grid-area: label; 
 
    padding: 20px; 
 
} 
 

 
.error_GridItem { 
 
    color: white; 
 
    background-color: red; 
 
    grid-area: error; 
 
    padding: 20px; 
 
} 
 

 
.gridContainer { 
 
    display: grid; 
 
    grid-template-columns: 100px 300px; 
 
    grid-template-areas: "label input""....... error"; 
 
    grid-gap: 10px; 
 
}

<h2> display: table </h2> 
 

 
<form novalidate class="tableContainer"> 
 
    <label for="textField" class="inputLabel">Name</label> 
 
    <input type=text id="textField" placeholder="full name" /> 
 
    <label for="textField" class="error">error</label> 
 
</form> 
 

 
<h2> CSS Grids </h2> 
 
<form novalidate class="gridContainer"> 
 
    <label for="textField" class="inputLabel_GridItem">Name</label> 
 
    <input type=text id="textField" placeholder="full name" /> 
 
    <label for="textField" class="error_GridItem">error</label> 
 
</form>

Answer 2

要素2と要素3を別のコンテナdiv要素に入れて、すべての子要素が（コンテナの）同じ幅を使用するようにします。コンテナーに最大幅を与えて、そのサイズより大きくならないようにします。

make要素1 float: left十分なスペースがあれば左に浮動します。

これは基本です。たぶんあなたは、あなたが望む正確な振る舞いのために、メディアの問い合わせやさらなるスタイリングが必要になるでしょう。

しかし、考え方は次のとおりです。 画面に十分な幅がある場合は、2と3を含むコンテナの横に1つ浮いています。