CSS Flex Box: как вертикально выровнять гибкие элементы по центру без потери высоты гибких элементов?

В настоящее время мои "гибкие" элементы выглядят так (выровнены по вертикали: вверху)...

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________



Моя цель — сделать так, чтобы они выглядели так (с выравниванием по вертикали: посередине)...

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________


Мои требования:

  • Гибкий контейнер должен оставаться на 100 % по высоте.
  • Гибкие элементы должны оставаться на 25% в высоту (равно 100%, что в любом случае является значением по умолчанию).
  • Флекс-элементы должны быть центрированы по вертикали.
  • Это должно быть отзывчивым и достаточно умным, чтобы оставаться посередине для каждого устройства (поэтому нет высоты строки/отступа).

http://jsfiddle.net/oneeezy/p4XtA/

HTML

<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }

html css flexbox grid-system
person Oneezy    schedule 03.05.2014    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Возможно, я неправильно понимаю, но не могли бы вы просто сделать:

HTML (тонкий)

.container
  .item 1
  .item 2
  .item 3
  .item 4

CSS

.container {
  display:flex;
  flex-direction: column;
  height: 100vh;
}
.item {
  flex-grow: 1;
  display:flex; 
  align-items:center;
  border-bottom:2px solid #e8e288;
}

Вот Codepen

person skube    schedule 02.07.2017

arrow_upward
9
arrow_downward

Чтобы выровнять содержимое дочернего элемента flexbox по вертикали, вам потребуется применить некоторые другие методы.

Я считаю, что там будет контент, завернутый в тег. Затем вы можете снова использовать flex и установить дочерний элемент в margin:auto; ДЕМО

CSS обновлен:

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;/* be a flexbox too */
}
div:first-child {
    border-top: 1px solid transparent;
}
div:hover {
    background: white;
}
p { /* or any child of flex box used */
    margin:auto;/* here center/middle align */
}

HTML-структура:

<!-- Flex Box -->
<section>
    <!-- Flex Items , Flex Box themselves -->
    <div>
        <p style="width:100%;/* to fill entire width*/">1</p> <!-- Flex Items  -->
    </div>
    <div>
        <p>2</p><!-- Flex Items  -->
    </div>
    <div>
        <p>3</p><!-- Flex Items  -->
    </div>
    <div>
        <p>4</p><!-- Flex Items  -->
    </div>
</section>

Возможно, запасной вариант с display:table может быть полезен: DEMO 2

/* fall back IE8 ie */
html, body, section {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:100%;
    width:100%;
}
section {
    display:table;
}
section > div {
    display:table-cell;
    vertical-align:middle;
}

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}
p {
    margin:auto;
}
person G-Cyrillus    schedule 03.05.2014
comment
@MrRioku Добро пожаловать. flex очень хорош, ему все еще нужны запасные варианты. здесь для начала подойдет display:table/table-cell в старом браузере jsfiddle.net/p4XtA/5 - person G-Cyrillus; 03.05.2014
comment
Да, я согласен. На самом деле я подумывал о том, чтобы попытаться использовать мою систему сеток для создания запасного варианта, но если подумать, таблицы (хотя это убивает меня, когда я говорю это) были бы идеальным запасным решением для flexbox. Отличная работа мой друг. - person Oneezy; 03.05.2014
comment
кажется, вы также можете удалить height: 25% из section › div и заменить на flex: 1; и это разделит их поровну. - person Oneezy; 03.05.2014
comment
точно :) вот так :) - person G-Cyrillus; 03.05.2014

arrow_upward
3
arrow_downward

Ваша проблема на самом деле не связана с так называемым flex-box, на самом деле вы хотите выровнять содержимое div (а не div), поэтому просто используйте какой-нибудь трюк, чтобы выровнять его нормально . Вот один из приемов:

div:before {
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

Демо.

person King King    schedule 03.05.2014
comment
Сложный! Но все же немного хака - я не жалуюсь, я думаю, что это блестяще ... но я полагаю, что у Flex Box есть что-то, чтобы контролировать такие вещи? - person Oneezy; 03.05.2014
comment
Это не хак, это CSS :) Для дочернего элемента flexox просто используйте margin:auto; - person G-Cyrillus; 03.05.2014
comment
touche` ха-ха.... а если серьезно. У создателей флексов нет ничего для этого? Я пытался использовать гибкие методы в течение нескольких дней и приблизился, но не сигара - person Oneezy; 03.05.2014
comment
@MrRioku, конечно, он может просто управлять гибким элементом, но не внутренним содержимым гибкого элемента. - person King King; 03.05.2014

arrow_upward
1
arrow_downward

Это Flex-способ решения вашей проблемы:

HTML

<div style="height:300px;"> <!-- Just to test/change the height of <section> element -->
<!-- Flex Box -->
<section>
    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>
</div>

CSS

/* Flex Box */
section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height:100%;
    justify-content: space-around;
}

/* Flex Items */
/* Child selector(>) is used to select <div> elements inside <section> element*/
section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;

    /* Added code */
    display: flex;       /* Gives inner div flex display */
    align-items: center; /* Centers the div in the cross axis */
    /**************/
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}
person Barun    schedule 06.06.2014