flexbox的中心兄弟姐妹

时间:2017-03-22 01:22:08

标签: html css css3 flexbox

这是我目前的html

<body>
    <div class="header"></div>
    <div class="side"></div>
    <div class="stuff"></div>
    <div class="footer"></div>
</body>

无论如何,我可以把兄弟骰子抓到中心,好像他们在一个包装div中?这样,无论发生什么事,他们都会并排在中心。不幸的是我很难过,因为我在父div中还有其他东西。

Something like this.

我有什么办法可以使用flexbox吗?并且没有添加html?

1 个答案:

答案 0 :(得分:2)

<div class="header">header</div>
<div class="side">stuff</div>
<div class="stuff">side</div>
<div class="footer">footer</div>
{{1}}

jsFiddle demo

注意:

  1. 每条线上的Flex项目都水平居中。
  2. 第一行引脚到顶部。底线引脚到底部。中线垂直居中。
  3. 每行强制一行。
  4. 覆盖(3),因此第二行可以显示两个项目。