How to align columns with flexbox?

问题

I am currently learning Flexbox Layout and I can not find a solution to my problem.

I tried with justify-content and flex-basis but it does not work. Does anyone have the solution ?

The result I would like :

section {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.column {
  width: 100%;
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

}

#first {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

https://jsfiddle.net/qdsbacvn/

回答1:

This is a perfect use case for CSS grid where you don't need a lot of complex code:

section {
  display: grid;
  margin: 2% auto;
  grid-gap:2%;
  grid-template-columns:repeat(4,1fr);
}

.column {
  background-color: #e2e2e2;
  padding: 5px;
}

#first {
  grid-column:span 2;
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

With flexbox you can try the following:

section {
  display: flex;
}

.column {
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-basis: 0;
}

#first {
  flex-grow: 2;
  flex-basis:4%; /*2 x (padding + margin)*/
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

Since your are using flex-basis:0 only padding/margin are considered before calculating the free space. The trick is to make sure we have the same free space in both situation thus we add to flex-basis of the big element the margin/padding that aren't present in the first case.

回答2:

A bit overkill for your use case but a much more robust solution in case you need to add more rows or your margins need to change size.

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

.column {
  flex:1;
  display:flex;
  flex-direction:column
}
.column:first-child {
  flex:2;
}
.col-row {
  flex:1;
  display:flex;
  flex-direction:row;
}

.col-row > div{
  flex:1;
  display:flex;
  flex-direction:row;
  margin:1vw;
  padding:1vw;
  background-color: #e2e2e2;
}

<div class="parent">
  <div class="column">
    <div class="col-row">
       <div>First</div>
    </div>
    <div class="col-row">
      <div>First</div>
      <div>Second</div>
    </div>
  </div>
  <div class="column">
     <div class="col-row">
        <div>Second</div>
     </div>
     <div class="col-row">
        <div>Third</div>
     </div>
  </div>
  <div class="column">
    <div class="col-row">
        <div>Third</div>
     </div>
     <div class="col-row">
        <div>Fourth</div>
     </div>
  </div>
</div>

回答3:

Check my code. I have increased slightly the flex box value.

section {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.column {
  width: 100%;
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#first {
  flex-grow: 2.2;
  flex-shrink: 2;
  flex-basis: 0;
}

<section>
  <div class="column" id="first">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

来源：https://stackoverflow.com/questions/55543039/how-to-align-columns-with-flexbox