Question

我已经尝试了很长时间但似乎没有任何工作。我有一些动态生成的divs。现在我希望每行只包含two divs，所以我读到我应该使用flex css属性。但我没有把它做对。目前所有的div都是单排的。这是我的代码

.flexbox
{
    display: flex;
}

 

.flexbox > div
{
   flex: 1 1 50%;
   padding: 10px;
   width: 20px;
   height: 100px;
}

<div class="flexbox">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

感谢您提前提供任何帮助

Answer 1

您应该添加flex-wrap: wrap以使弹性项目分为多行，并且还box-sizing: border-box以保持填充在元素的宽度内。

＆＃13;

* {
  box-sizing: border-box;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox > div {
  flex: 1 1 50%;
  padding: 10px;
  height: 100px;
}

＆＃13;

<div class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

＆＃13;

Answer 2

你也可以使用宽度：50％：

div{
float:left
display:inline-block;
width:50%;
}

在一行中仅设置两个Flexbox

2 个答案: