フレックスを表示します。 2番目の要素を最初の要素の下に表示する方法。

Question

私は解決すべき障害が1つあります。私は要素の下に要素を持っていたいと思います。私はdisplay-flexを使い、select要素の真下で要素ラベルをどのように動かすのか分からないのですか？通常のディスプレイを使用する代わりにフレックスボックスで可能ですか：ブロック;各要素に？ここで

は私のコードは次のとおりです。

<div class="choose-list"> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj domu</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj zadaszenia</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj stropu</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>garaż</label> 
       </div> 

とCSSファイル：コメント

ラップ毎に基づいて更新

.choose-list{ 
    display: flex; 
    justify-content: space-between; 
    label{ 

    } 
} 

Answer 1

は/ラベルを選択し、それらにdisplay: flex; flex-direction: column;

.choose-list { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.choose-list > div { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="choose-list"> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj domu</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj zadaszenia</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj stropu</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>garaż</label> 
 
    </div> 
 
</div>

を与えます

---

あるいはそれらを最小20.1％の幅を与える、1

.choose-list { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.choose-list > * { 
 
    flex-basis: 20.1%;  /* need a value greater than 20% 
 
           so they break line after 4 items */ 
 
} 
 
.choose-list > label { 
 
    order: 1; 
 
}

<div class="choose-list"> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj domu</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj zadaszenia</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj stropu</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>garaż</label> 
 
</div>

に flex-wrap: wrapを追加し、ラベルの順序を設定