How to make child elements align 2 per row in flexbox

Question

Here is my current css:

.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%;
}

<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>

What this currently give me:

How do I get the 'option' div's to align as 2 per row (equally sized) instead of stacking on top of each other? Is this possible using only flexbox?

Answer 1

Change this:

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

To this:

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

---

Only direct children of a flex-container are included in the flex context.

You need to declare another flex-container.

.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>

---

If you want to have some spacing between items use the property justify-content in .questions-section and decrease the flex-basis of the .question-item like so:

.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;
}

<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>

Answer 2

Add display: flex to the other div .questions-section too.
Also, to avoid padding and border from increasing the size of the elements, you should add box-sizing: border-box. I've applied it to all elements.

https://jsfiddle.net/kbkb5b4m/

.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;
}

<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>

Answer 3

Two changes.

1. Add box-sizing: border-box to all elements. This way the red border is included inside the 50% width, not outside it.
2. Use float: left on those four elements so they can be flush against each other. Otherwise, since they're block-level and not part of the flexbox in this example, they'll always begin on new lines.

Updated demo below:

* {
  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%;
}

<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>