时间戳

首页 > 解决方案 > 如何将子元素拆分为多行/多行？

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

问题描述

正如您在我的代码片段中看到的那样，我在一行中有 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>

标签： htmlcss

解决方案

尝试使用参数flex-basiswith50%来限制 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>

推荐阅读