Как выровнять столбцы с flexbox? - PullRequest
Новая
       37

Как выровнять столбцы с flexbox?

3 голосов
/ 05 апреля 2019

В настоящее время я изучаю макет Flexbox и не могу найти решение своей проблемы.

Я пытался использовать justify-content и flex-based, но он не работает.У кого-нибудь есть решение?

Результат, который я хотел бы получить: здесь

Результат, который я имею: https://jsfiddle.net/qdsbacvn/

<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>
  </div>
</section>

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;
}

Ответы [ 3 ]

4 голосов
/ 06 апреля 2019

Это идеальный вариант использования сетки CSS, где вам не нужно много сложного кода: 

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>

С flexbox вы можете попробовать следующее: 

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>

Поскольку вы используете flex-basis:0, перед вычислением свободного места учитываются только отступы / отступы. Хитрость заключается в том, чтобы убедиться, что у нас одинаковое свободное пространство в обеих ситуациях, поэтому мы добавляем к flex-basis большого элемента поля / отступы, которых нет в первом случае.

enter image description here

1 голос
/ 06 апреля 2019

Немного излишним для вашего варианта использования, но гораздо более надежным решением, если вам нужно добавить больше строк или ваши поля должны изменить размер. 

.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>
1 голос
/ 05 апреля 2019

Проверьте мой код. Я немного увеличил значение flex box. 

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>
...