CODEWITHSUNDEEP
htmlcssflexbox
dagda1
dagda1

Reputation: 28800

stack divs two by two with flex-wrap not wrapping

In the code snippet below, I would like the divs to appear with 2 rows and 2 columns in each row

.column-container {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>

Upvotes: 1

Views: 477

Answers (2)

Bryce Howitson
Bryce Howitson

Reputation: 7690

You need to give your wrapper a height and width for the wrapping to work. AND you need the flex-basis to be a width/height minus borders.

Also in your case, you have the flex on the wrong container to get wrapping to work. 

.flex-wrapper {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}

.flex-cell {
  flex: 1;
  border:1px solid blue;
  flex-basis: calc(50% - 2px); //size - border width
  
  // vertically center the content - assume that's what you wanted
  text-align: center;    
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="flex-wrapper">
  <div class="flex-cell">
    <span class="content-center">1</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">2</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">3</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">4</span>
  </div>
</div>

Upvotes: 1

tao
tao

Reputation: 90068

You're wrapping .column-container, which only has 1 child: .wrapper. You should wrap .wrapper, really: 

.column-container {
  display: flex;
  min-height: 100%;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}
.wrapper > * {
  flex-basis: calc(50% - 40px);
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions