CODEWITHSUNDEEP
cssflexbox
Martin Evans
Martin Evans

Reputation: 46759

CSS flexbox: 3 columns into 2 + 1

I am currently converting an old page away from using a <table> layout and have been trying to implement the behaviour using flexbox. The aim is to have 3 columns, the first two centred horizontally and vertically, with the last column containing a lot of text, which is displaying ok.

I am trying to use a media query to wrap the third column under the first two when the browser width is small as follows:

3 into 2 requirement

The code snippet below achieves the correct layout but will obviously fail on small widths and just produce a single column:

incorrect single column result

I am guessing this needs flex-wrap somehow?

Are multiple rows also possible with a single container row? Or is it best to have one container per row?

.row {
    display: flex; 
    justify-content: center;
    padding: 5px;
    margin: 2px;
    border: 1px solid #000;
    font-size: 0.7em;
}

.col1, .col2, .col3 {
    background-color: #999;
    padding: 8px; 
    margin: 2px;
}

.col1, .col2 {
    flex: 1; 
    
    /* Horizontal centring */
    text-align: center;

    /* Add vertical centring */
    display: flex;
    flex-direction: column;
    justify-content:center;
}

.col3 {
    flex: 3;
    background-color:#fff;
}

@media(max-width: 400px){
    .row {display: block;}
}
<div class="row">
<div class="col1">
    Column 1
</div>
<div class="col2">
    Column 2
</div>
<div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
</div>
</div>

<div class="row">
<div class="col1">
    Column 1
</div>
<div class="col2">
    Column 2
</div>
<div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
</div>
</div>

Upvotes: 1

Views: 905

Answers (2)

vals
vals

Reputation: 64164

You can get rid of the row element with some tricks, specially if you know beforehand the width of the col1 and col2 elements. Notice the width of the col3 element is quite artificial:

.row {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  border: solid 1px red;
}
.col1,
.col2 {
  background-color: lightblue;
  padding: 10px;
  background-clip: content-box;
}
.col3 {
  flex-basis: calc(100% - 194px);
  padding: 5px;
}
.col1,
.col2,
.col3 {
  margin: 10px 0px;
}
.col1 {
  border: solid 1px black;
  border-right-width: 0px;
  margin-left: 10px;
}
.col2 {
  border: solid 1px black;
  border-left-width: 0px;
  border-right-width: 0px;
}
.col3 {
  border: solid 1px black;
  border-left-width: 0px;
}
<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

Also, a solution for the normal layout, including 40% flex-basis for col1 and col2. They should be 50%, but since there are some margins and paddings, it's better to be on the low side and the the flex-grow compensate it

.row {
  display: flex;
  justify-content: center;
  padding: 5px;
  margin: 2px;
  border: 1px solid #000;
  font-size: 0.7em;
}
.col1,
.col2,
.col3 {
  background-color: #999;
  padding: 8px;
  margin: 2px;
}
.col1,
.col2 {
  flex: 1;
  /* Horizontal centring */
  text-align: center;
  /* Add vertical centring */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.col3 {
  flex: 3;
  background-color: #fff;
}
@media(max-width: 400px) {
  .row {
    flex-wrap: wrap;
  }
  .col1,
  .col2 {
    flex-basis: 40%;
  }
  .col3 {
    flex-basis: 80%;
  }
}
<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

Upvotes: 1

allnodcoms
allnodcoms

Reputation: 1262

You would give your .row definition flex-wrap: wrap; and set a min-width value for column 3. When it gets below that width it will drop down as you have indicated above.

Upvotes: 1

Related Questions