html - 如何将子元素分成多行/多行？

Question

正如您在下面的代码片段中看到的那样，一行中有 6 个子元素，如何将它们分成多行，假设每行中有两个元素？

知道怎么做吗？

form {
  display: flex;
  top: 0px;
  margin: 0px;
  width: 1900px;
  padding: 0px;
  align-items: center;
}

.container {
  display: flex;
  flex-flow: row wrap;
  top: 5px;
  margin: 20px;
  border-width: 2px;
  border-bottom-color: #3300ff;
  border-bottom-style: solid;
  width: 1900px;
  border: 5px solid green;
  border-radius: .5em;
  padding: 5px;
  align-items: center;
}

.child {
  margin-bottom: 50px;
    background-color: green;
}

<div class="container">


  <div class="child">
    <div id="slider9" class='slider row1 col1'></div>

    <div class="my_text">
      <center>
        <p>param_1</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button9">TURN OFF</button>
      </center>
    </div>
  </div>
  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>

    <div class="my_text">
      <center>
        <p>param_2</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider11" class='slider row1 col3'></div>

    <div class="my_text">
      <center>
        <p>param_3</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button11">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>

    <div class="my_text">
      <center>
        <p>param_4</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>

    <div class="my_text">
      <center>
        <p>param_5</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>

    <div class="my_text">
      <center>
        <p>param_6</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>




</div>

Answer 1

尝试使用参数 flex-basis与 50%限制 child 占据一半的空间.container .

.container {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  top: 5px;
  margin: 20px;
  border-width: 2px;
  border-bottom-color: #3300ff;
  border-bottom-style: solid;
  width: 1900px;
  border: 5px solid green;
  border-radius: .5em;
  padding: 5px;
  align-items: center;
}

.child {
  flex-basis: 50%;
  margin-bottom: 50px;
  background-color: green;
}

<div class="container">

  <div class="child">
    <div id="slider9" class='slider row1 col1'></div>
    <div class="my_text">
      <center>
        <p>param_1</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button9">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>
    <div class="my_text">
      <center>
        <p>param_2</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider11" class='slider row1 col3'></div>
    <div class="my_text">
      <center>
        <p>param_3</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button11">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>
    <div class="my_text">
      <center>
        <p>param_4</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>
    <div class="my_text">
      <center>
        <p>param_5</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

  <div class="child">
    <div id="slider10" class='slider row6 col2'></div>
    <div class="my_text">
      <center>
        <p>param_6</p>
        <button class="sliderStateChange">Enable</button>
        <button id="turn_off_button10">TURN OFF</button>
      </center>
    </div>
  </div>

</div>