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

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

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 2

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> 

Answer 3

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>