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

Question

Я недавно играл с Flexbox в первый раз и, в общем, это абсолютно потрясающе. Недавно я столкнулся с проблемой, когда я не могу представить гибкие элементы, которые обертывают любые вертикальные интервалы.

Я попытался с помощью:

align-content: space-between; 

, но это, кажется, не делать ничего. Из прочтения, которое я сделал, это будет работать только в том случае, если мой контейнер flex выше, чем содержащиеся в нем элементы (это правильно?) Если это так, то мне не нужно будет устанавливать высоту для моего гибкого контейнера, что казалось бы, победил цель использования flexbox?

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

Надеюсь, я что-то довольно очевидное отсутствие - вот ссылка на codepen: http://codepen.io/lordchancellor/pen/pgMEPz

Кроме того, вот мой код:

HTML:

<div class="container"> 
    <div class="col-sm-12"> 
    <h1>Flexbox Wrapping</h1> 

    <div class="flexContainer"> 
     <div class="flexLabel">This is a flex label</div> 

     <a class="btn btn-primary">Button 1</a> 
     <a class="btn btn-warning">Button 2</a> 
     <a class="btn btn-success">Button 3</a> 
    </div> 
    </div> 
</div> 

CSS:

.flexContainer { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    align-content: space-between; 
    justify-content: center; 
} 
.flexContainer .flexLabel { 
    flex-basis: 150px; 
    flex-shrink: 0; 
} 

РЕДАКТИРОВАТЬ - Просто собираюсь добавить здесь немного больше деталей, так как я не уверен, что я p используя его достаточно хорошо.

В моем более крупном проекте у меня есть элементы уровня блока, которые расположены в строке с использованием flexbox. Тем не менее, требуется некоторая отзывчивость, поскольку пользователь может уменьшить ширину экрана. На этом этапе я хочу, чтобы мои элементы начали складываться (следовательно, обертывание). Однако, когда элементы начинают складываться, все они касаются вертикально, где я хочу, чтобы между ними было расстояние.

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

Answer 1

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

.flexContainer { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    background: pink; 
 
    width: 150px; 
 
} 
 
.flexContainer > * { 
 
    margin: 1em 0; 
 
} 
 
.flexContainer .flexLabel { 
 
    flex-basis: 150px; 
 
    flex-shrink: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-sm-12"> 
 
    <h1>Flexbox Wrapping</h1> 
 

 
    <div class="flexContainer"> 
 

 
     <div class="flexLabel">This is a flex label</div> 
 

 
     <a class="btn btn-primary">Button 1</a> 
 
     <a class="btn btn-warning">Button 2</a> 
 
     <a class="btn btn-success">Button 3</a> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

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

Answer 3

У меня была аналогичная проблема, и я использовал следующий взломать решить эту проблему.

/* add a negative top-margin to the flex container */ 
.flexContainer { 
     /* ... your existing flex container styles here */ 
    margin: -10px 0 0 0; 
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */ 
.flexContainer > * { 
    margin-top: 10px; 
} 

В верхнем ряде гибких элементов отрицательные и положительные поля взаимно сокращаются, для последующих строк он добавляет запас между рядами (в данном случае 10px между рядами).

Это менее элегантный, но он выполняет свою работу.

Answer 4

Другим Hacky решением является дать позиции нижнюю границу:

border-bottom: 10px solid gray; 

Цвет должен быть цвет фона, очевидно.