CODEWITHSUNDEEP
cssflexbox
Matoeil
Matoeil

Reputation: 7289

Change the flex direction of only some flex items

Without changing the html structure, is it possible to display the last 2 divs on the same line (row direction)

.wrapper {
  display: flex;
  flex-direction: column;
}
<div class="wrapper">
  <div class="elt1">elt1</div>
  <div class="elt2">elt2</div>
  <div class="elt3">elt3</div>
  <div class="elt4">elt4 to be in row</div>
  <div class="elt5">elt5 to be in row</div>
</div>

Upvotes: 1

Views: 1054

Answers (1)

Johannes
Johannes

Reputation: 67738

Yes, if you use flex-wrap: wrap; and the default flex-direction: row plus 100%/50% width settings on the children as follows:

(edited: additional centering of content as asked for in the comments)

.wrapper {
  display :flex;
  flex-wrap: wrap; 
}
.wrapper > * {
  width: 100%;
  border: 1px dotted #ccc;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.wrapper > *:last-child,
.wrapper > *:nth-last-child(2) {
  width: 50%;
}
<div class="wrapper">
  <div class="elt1">elt1</div>
  <div class="elt2">elt2</div>
  <div class="elt3">elt3</div>
  <div class="elt4">elt4 to be in row</div>
  <div class="elt5">elt5 to be in row</div>
</div>

Upvotes: 2

Related Questions