如何使子元素在flexbox中每行对齐2

Question

这是我目前的css：

＆＃13;

＆＃13;

.course-widget {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 49px 49px 49px 49px;
  -moz-border-radius: 49px 49px 49px 49px;
  -webkit-border-radius: 49px 49px 49px 49px;
  border: 1px solid #000000;
  /*shadow effect*/
  -webkit-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
}
.widget-section {
  margin: 10px;
  width: 100%;
  border: 1px solid #000000;
}
.questions-section {
  width: 100%;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  width: 50%;
}

＆＃13;

<div class="course-widget">
  <div class="widget-section">Top</div>
  <div class="widget-section">Middle</div>

  <div class="widget-section questions-section">
    <div class="question-item">option 1</div>
    <div class="question-item">option 2</div>
    <div class="question-item">option 3</div>
    <div class="question-item">option 4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

目前这给了我什么：

如何获得＆＃39;选项＆＃39; div每行对齐2个（大小相等）而不是堆叠在一起？这只能使用flexbox吗？

Answer 1

将display: flex添加到另一个div .questions-section 此外，为避免填充和边框增加元素的大小，您应添加box-sizing: border-box。我已将它应用于所有元素。

https://jsfiddle.net/kbkb5b4m/

＆＃13;

＆＃13;

.course-widget {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 49px 49px 49px 49px;
  -moz-border-radius: 49px 49px 49px 49px;
  -webkit-border-radius: 49px 49px 49px 49px;
  border: 1px solid #000000;   /*shadow effect*/
  -webkit-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
}

.widget-section {
  margin: 10px;
  width: 100%;
  border: 1px solid #000000;
}

.questions-section {
  width: 100%;
  
  display: flex;
  flex-wrap: wrap;
}

.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  width: 50%;
}

* {
  box-sizing: border-box;
}

＆＃13;

<div class="course-widget">
  <div class="widget-section">Top </div>
  <div class="widget-section">Middle</div>

  <div class="widget-section questions-section">
    <div class="question-item"> option 1</div>
    <div class="question-item"> option 2</div>
    <div class="question-item"> option 3</div>
    <div class="question-item"> option 4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

两个变化。

1. 将box-sizing: border-box添加到所有元素。这样，红色边框包含在50%宽度内，而不在其外部。
2. 对这四个元素使用float: left，以便它们可以互相冲洗。否则，由于它们是阻止级别而不是此示例中的flexbox的一部分，因此它们始终以新行开头。

以下更新的演示：

＆＃13;
＆＃13;
* {
  box-sizing: border-box;
}
.course-widget {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 49px 49px 49px 49px;
  -moz-border-radius: 49px 49px 49px 49px;
  -webkit-border-radius: 49px 49px 49px 49px;
  border: 1px solid #000000;
  /*shadow effect*/
  -webkit-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
}
.widget-section {
  margin: 10px;
  width: 100%;
  border: 1px solid #000000;
}
.questions-section {
  width: 100%;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  float: left;
  width: 50%;
}
＆＃13;
<div class="course-widget">
  <div class="widget-section">Top</div>
  <div class="widget-section">Middle</div>

  <div class="widget-section questions-section">
    <div class="question-item">option 1</div>
    <div class="question-item">option 2</div>
    <div class="question-item">option 3</div>
    <div class="question-item">option 4</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

改变这个：

.questions-section {
  width: 100%;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  width: 50%;
}

对此：

.questions-section {
  display: flex;
  flex-wrap: wrap;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  flex: 0 0 50%;
  box-sizing: border-box;
}

只有flex-container的直接子项包含在flex上下文中。

您需要声明另一个弹性容器。

.course-widget {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 49px 49px 49px 49px;
  -moz-border-radius: 49px 49px 49px 49px;
  -webkit-border-radius: 49px 49px 49px 49px;
  border: 1px solid #000000;
  /*shadow effect*/
  -webkit-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
}
.widget-section {
  margin: 10px;
  width: 100%;
  border: 1px solid #000000;
}
.questions-section {
  display: flex;
  flex-wrap: wrap;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  flex: 0 0 50%;
  box-sizing: border-box;
}

<div class="course-widget">
  <div class="widget-section">Top</div>
  <div class="widget-section">Middle</div>

  <div class="widget-section questions-section">
    <div class="question-item">option 1</div>
    <div class="question-item">option 2</div>
    <div class="question-item">option 3</div>
    <div class="question-item">option 4</div>
  </div>
</div>

如果您希望项目之间有一些间距，请使用justify-content中的属性.questions-section并减少flex-basis的{​​{1}}，如下所示：

.question-item

.course-widget {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 49px 49px 49px 49px;
  -moz-border-radius: 49px 49px 49px 49px;
  -webkit-border-radius: 49px 49px 49px 49px;
  border: 1px solid #000000;
  /*shadow effect*/
  -webkit-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
  box-shadow: 11px 11px 30px 0px rgba(0, 0, 0, 0.42);
}
.widget-section {
  margin: 10px;
  width: 100%;
  border: 1px solid #000000;
}
.questions-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.question-item {
  border: 2px solid #ff0000;
  color: #00AC7F;
  flex: 0 0 48%;
  box-sizing: border-box;
}