Контролировать среднее пространство между двумя гибкими элементами подряд - PullRequest
Новая
       4

Контролировать среднее пространство между двумя гибкими элементами подряд

0 голосов
/ 15 февраля 2019

Как я могу контролировать среднее пространство между двумя гибкими элементами подряд?Моя цель - минимизировать среднее пространство между элементами.

Другими словами, я хочу выровнять столбцы по центру и по центру, сохраняя при этом текст по центру.

Я бы тоже хотел бытьспособен контролировать средний желоб.Также, возможно, можно будет сказать, что средний желоб должен иметь фиксированное количество пикселей, например, 20 пикселей.

Это не работает, потому что в середине слишком много места 

.row {
  display: flex;
  
}

.column {
  border: 1px solid #ccc;
  width: 50%;
}

h2 {
  text-align: center;
}
<div class="row">
  <div class="column first">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
  <div class="column second">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
</div>

Это не работает, потому что текст не центрирован 

.row {
  display: flex;
  
}

.column {
  border: 1px solid #ccc;
  width: 50%;
}

h2 {
  text-align: center;
}

.first h2 {
  text-align: right;
}

.second h2 {
  text-align: left;
}
<div class="row">
  <div class="column first">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
  <div class="column second">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

Если вы хотите, чтобы ваши элементы имели определенную пропорцию по отношению друг к другу или ко всему (т. Е. 50%), flexbox - даже не лучшее решение (хотя его можно выровнять, чтобы выполнить требование),

Подойдет простой display: inline-block; width: 50%; box-sizing: border-box для детей.

Flexbox был спроектирован для распределения жидкости в положительном или отрицательном пространстве.

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

  • положительное пространство : когдародитель> сумма дочерних элементов, перераспределите пространство каждому дочернему элементу пропорционально их соответствующим значениям flex-grow (до заполнения пространства) или, если нет дочерних элементов с положительными значениями flex-grow, распределите пространство между дочерними элементами
  • отрицательный пробел : если родитель <сумма детей, сократите каждого ребенка пропорционально их <code>flex-shrink значениям.

У вас есть случай положительного пробела, где детине имеют flex-grow, поэтому пространство может быть перераспределено между ними.У вас есть три варианта:

  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly

Обратите внимание, что пробелы одинаковыраспределяется в каждом конкретном случае.Вот почему он называется flexbox, для этого он и предназначен, и, если хотите, это его сверхдержава.
Когда вы устанавливаете width: 50%, вы как бы забираете все это: 

.row {
  display: flex;
  width: 100%;
}

.row>* {
  border: 1px solid #ccc;
  text-align: center;
}

.one {
  justify-content: space-between;
}

.two {
  justify-content: space-around;
}

.three {
  justify-content: space-evenly;
}

.grow>* {
  flex-grow: 1;
  margin: 1rem;
}
<code>justify-content: space-between</code>
<div class="row one">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-between  (unequal)</code>
<div class="row one">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>

<hr>
<code>justify-content: space-around;</code>
<div class="row two">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-around; (unequal)</code>
<div class="row two">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>justify-content: space-evenly;</code>
<div class="row three">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-evenly; (unequal)</code>
<div class="row three">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>> flex-grow: 1;</code>
<div class="row grow">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>> flex-grow: 1; (unequal elements)</code>
<div class="row grow">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>

Более подробное объяснение того, как работает flexbox, можно найти здесь .

Официальная спецификация здесь .

Учитывая ваш вопрос, есть большой шанс justify-content: space-evenly сделает то, что вы хотите, но я не уверен, так как ваш вопрос не очень ясен.

Важное примечание : Вы всегда можете использовать margin и padding на своих элементах, что соответственно подтолкнет их.Также обратите внимание, что margin: auto на flexbox дочерние элементы украдут положительное пространство из flexbox и перераспределят его равным между всеми margin:auto s, присутствующими в родительском пространстве (и будут выглядеть так, как если бы flexbox неработать должным образом, на самом деле это работает, но перераспределять ничего не остается).

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

Пример: 

.row {
  display: flex;
  justify-content: center;
}
.row > *  {
  margin: 0 auto;
  display: flex;
}

.row>*>* {
  border: 1px solid #ccc;
  text-align: center;
  margin: 1rem;
}
<div class="row">
  <div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <div>
      <h2>Much more text here</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Much more text here</h2>
      <p>Text</p>
    </div>
  </div>
</div>

Но, опять же, это не то, для чего вам нужно flexbox.
Точно такого же можно добиться, используя простую структуру parent > child, гдеу родителей display: block; text-align: center;, а у детей display: inline-block;

.row {
  text-align: center;
}

.row>* {
  border: 1px solid #ccc;
  text-align: center;
  margin: 1rem;
  display: inline-block;
}
<div class="row">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <h2>Much more text here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Much more text here</h2>
    <p>Text</p>
  </div>
</div>

Обратите внимание на отсутствие дополнительной обертки в разметке.

0 голосов
/ 15 февраля 2019

Почему бы просто не использовать CSS-сетку для задачи?Он предлагает свойство grid-column-gap, которое делает именно то, что вам нужно: 

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
}

.column {
  border: 1px solid #ccc;
}

h2 {
  text-align: center;
}
<div class="row">
  <div class="column">
    <h2>Centered<br />Text</h2>
  </div>
  <div class="column">
    <h2>Centered<br />Text</h2>
  </div>
</div>
0 голосов
/ 15 февраля 2019

Попробуйте сделать это 

.column:not(:last-child){
margin-left: 20px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...