CODEWITHSUNDEEP
htmlcssflexbox
user9278880
user9278880

Reputation:

css flexbox 3-column layout where first is fixed width

I am trying to better understand flex box css and have a main layout for all pages. It is 3 columns where the first column is fixed width and the others can be any size so long as all 3 take up 100% width.

I believe the problem is in .col class but unsure how to set the 1st column and let the other grow. Thank you.

.wrapper {
  display: flex;
  flex-direction: row;
}

.col {
  flex-basis: 25%;
  align-items: stretch;
}
<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Upvotes: 4

Views: 4127

Answers (1)

Temani Afif
Temani Afif

Reputation: 272891

You simply need to specify a fixed width to the first one and then set flex:1 to the other so they take the remaining space and fill 100% of the container space:

.wrapper {
  display: flex;
  flex-direction: row;
}


.col {
  flex: 1;
  background: red;
}
.col:first-child {
  width: 100px; /* Or a percentage value */
  flex:initial;
  background: green;
}
<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Upvotes: 3

Related Questions