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

ProgramBox

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

Post author:admin
Запись опубликована:1 апреля, 2023
Post category:Вопросы по программированию

#css #flexbox #multiple-columns

#css #flexbox #несколько столбцов

Вопрос:

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

Я пробовал с помощью justify-content и flex-basis, но это не работает. У кого-нибудь есть решение?

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

 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. Каков ваш ожидаемый макет? ваш первый элемент в верхней строке меньше двух нижележащих из-за их полей.

2. Я добавляю фотографию результата, который я хочу получить в своем посте. Спасибо за ваш ответ

3. Вам не нужно поле: 0 автоматически и выравнивать -содержимое: пробел между, ширина: 100% по умолчанию, может быть выполнено только с одним родительским элементом (разделом) и т.д.

4. О, вы правы! Спасибо за напоминание 😉

Ответ №1:

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

 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 большому элементу поля / отступы, которых нет в первом случае.

1. Большое спасибо, это не макет Flexbox, но я держу это где-то в своей голове. Я очень скоро изучу CSS Grid 😉

2. @maher добавил решение flexbox 😉

3. Благодаря вашему коду я начинаю понимать логику, лежащую в основе проблемы с полями. Я действительно ценю, спасибо

4. @maher не только поля, но и отступы, добавил больше деталей

5. Очень чистые решения. Хорошая работа.

Ответ №2:

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

 .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. Это очень интересно, html более точный / структурированный, чем мой, и результат идеален. Я попытаюсь воспроизвести это. Спасибо за ваш ответ 🙂

2. Чрезмерное усложнение, по умолчанию используется flex-direction: строка.

3. @VXp Поскольку OP явно не очень знаком с flexbox, одна дополнительная строка, которая должна быть явной, кажется, того стоит

4. Просто ненужная строка css, которая для некоторых может превратиться в привычку, поэтому осторожно, хрупкая, обращайтесь с осторожностью или лучше вообще не обращайтесь, оставьте ее в покое, в углу, где ей место. Поскольку OP его не использует, я почти уверен в его осведомленности.

5. Это верно, я в курсе этого, тем не менее, приятно понимать код (может быть, вам следует поместить это в комментарий? для понимания начинающих).

Ответ №3:

Проверьте мой код. Я немного увеличил значение 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>

1. Спасибо, это идеально, но не могли бы вы объяснить мне, как и почему значение 2.2 в свойствах flex-grow устранило мою проблему?

2. Проблема заключается в полях и заполнении, если вы установите их равными нулю, они будут выровнены правильно.

3. Вы правы, я пытался без нас. Это подтверждает объяснение выше. Спасибо!

4. @maher есть более опытные программисты, чем я, которые могут дать вам лучшие ответы.

5. Все ваши ответы великолепны, если это может помочь другим;-)