正如您在下面的代码片段中看到的那样,一行中有 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>
最佳答案
尝试使用参数 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>
关于html - 如何将子元素分成多行/多行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58207849/