Вопрос по css3, css, flexbox – Вертикально центрировать предметы с flexbox

23

Я пытаюсь центрировать элементы по вертикали с помощью flexbox CSS; и я знаю, как это сделать с кодом без префикса производителя, но даже с префиксами поставщика я не могу заставить его работать в Webkit (Chrome).

Я пытаюсь выровнять по вертикали промежутки в #trigger.

Вот мой CSS:

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

Есть идеи, что я делаю не так?

И если вы знаете префиксы / версии других поставщиков, которые я использую, не стесняйтесь делиться ими, чтобы это работало не только в Webkit.

Это может пригодиться:gist.github.com/cimmanon/727c9d558b374d27c5b6 cimmanon

Ваш Ответ

2   ответа
8

ледующих свойств. Обратите внимание, что в нем используется старый синтаксис, хотя я тестировал последние сборки Chrome, Firefox и Firefox Aurora -

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orient указывает, как должны быть выровнены дочерние элементы блока, который в нашем случае является вертикальным.

box-pack выравнивает дочерние элементы вдоль оси ориентирования.

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

ВотДемонстрация кодасвойства, которые я применил к элементам span кромеdisplay: block чисто для косметических целей.

С помощьюbox-pack/justify-content для вертикального центрированиятолько работает, когда выравнивание сгиба - столбец / вертикаль, а не ряд / горизонталь. Если OP хочет, чтобы элементы располагались горизонтально, высота должна быть указана для гибких элементов и включенной обертки. Насколько я могу судить, браузеры, которые реализуют только старую спецификацию 2009 года, вообще не поддерживают перенос. cimmanon
Вы правы, но, как указано в вопросе, OP фактически пытался «выровнять по вертикали» промежутки в #trigger, поэтому я увидел, что приведенная выше реализация подходит для варианта использования. Vishu
Кстати, вы используете более старые и более медленные префиксы, новый - display: flex Dominic
да, это было использование старого синтаксиса, как упоминалось в моем ответе выше. Vishu
ты спас мне жизнь, это было действительно здорово ... Muthukumar Anbalagan
40

align-items собственность длягибкие контейнеры (элементы сdisplay: flex применяется к ним), а негибкие предметы (детигибкие контейнеры). Старая спецификация 2009 года не имеет свойства, сравнимого сalign-items;box-align недвижимость с 2009 года соответствует доalign-content из стандартной спецификации.

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}

<div id="trigger">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
Вот демонстрация, которая демонстрирует вертикальное / горизонтальное центрирование с анонимными элементами Flex:codepen.io/cimmanon/pen/mxuFa cimmanon
Спасибо, демо работает отлично, но когда я пытаюсь применить его к своему коду, это не работает. Не могли бы вы взглянуть на css для #trigger и #trigger span, которые у меня есть? IMUXIxD
Какая демка? Для того, кто находится на codepen, #trigger соответствует ul, а span будет соответствовать li. Если это не решит проблему, предоставьте демо, чтобы я мог увидеть проблему. cimmanon
JS Fiddle работает отлично. О, теперь это работает. Может быть, было слишком поздно прошлой ночью, когда я пытался это осуществить. Спасибо вам за помощь! IMUXIxD

Похожие вопросы