问题如何使用CSS flexbox垂直对齐和拉伸内容

使用CSS flexbox，如何在不使用css的情况下同时将所有div的内容同时垂直居中，同时保持所有div的相同高度 height 属性？

细节 - http://jsbin.com/efaCEVa/1/edit

6637

2017-09-28 05:49

起源

可能重复使用flexbox垂直居中的项目 - cimmanon

这不是重复，请参阅此示例 jsbin.com/efaCEVa/1/edit - Stephen

stackoverflow.com/questions/28929635/... - Ben

答案:

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

2018-06-21 23:58

  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex

2017-07-25 18:38

使用Flexbox没有理由这样做。表/表格单元属性已经能够长时间执行此操作：

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

这就是Flexbox的样子：

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

2017-09-29 12:14

我想在flexbox中这样做，因为我还希望内容在页面的整个宽度上均匀分配 - Stephen

有两种可能性很好。我会删除答案的第一句话：“没有理由用Flexbox这样做。”我们中的一些人已经将完整的flexbox方法应用于容器。 - Christian Bonato

花更多时间学习flexbox而不是使用像这样的旧技术要好得多。另外，flexbox比较长的唯一原因是因为cimmanon写出了浏览器前缀，css预处理器会处理这个问题。 - captDaylight

@captDaylight我使用CSS预处理器生成了它。当旧技术非常适合任务，拥有更广泛的浏览器支持（以及更少的错误），最终达到相当于没有任何好处。减代码到底。 - cimmanon

@cimmanon然后为什么要显示代码后处理？它只是让它看起来更加令人生畏，没有人会写出所有这些。你的解决方案完美无缺，我同意，但我所建议的只是学习Flexbox，它非常强大并解决了许多需要环形css黑客攻击的情况。 - captDaylight

问题 如何使用CSS flexbox垂直对齐和拉伸内容

答案:

HTML

CSS

热门问题

问题如何使用CSS flexbox垂直对齐和拉伸内容