maxit maxit - 6 months ago 26
HTML Question

how to create space between columns using css flex

I would like to create space between columns that I build with css flex. I do not want to use padding or margin.

There could be between 2 or 6 columns.

If two columns they could have several width variations like

50% / 50%
25% / 75%
75% / 25%

etc

How can I introduce some space between columns that does not use padding or margin, since I want space just between columns and not space all around columns.

Answer Source

With this answer I want to show by not using margin, what you miss out on one of Flexbox's clever behavior, where when flex items doesn't fit (wider than their parent), they are able to shrink equally and keep each column's proportional width.

So to answer your question: How can I introduce some space between columns that does not use padding or margin, since I want space just between columns and not space all around columns

Answer: You add the margin between each column, not on all sides

.container {
  display: flex;
}
.container .column {
  height: 150px;
  border: 1px solid blue;
}
.container .column:not(:first-child) {
  margin-left: 5px;                       /*  on all but the first column  */
}
.container .column:not(:last-child) {
  margin-right: 5px;                      /*  on all but the last column  */
}

.container .column:nth-child(1),
.container .column:nth-child(2) {
  flex-basis: 50%;
}
.container .column:nth-child(3),
.container .column:nth-child(6) {
  flex-basis: 25%;
}
.container .column:nth-child(4),
.container .column:nth-child(5) {
  flex-basis: 75%;
}
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download