显示flex。如何在第一个元素下面显示第二个元素。

Question

我有一个障碍需要解决。我想在元素下面有元素。我使用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;

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者给他们一个至少20.1％的宽度，添加flex-wrap: wrap并将标签的顺序设置为1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;