CSS Flex Box：如何在不损失柔韧性项目高度的情况下将“柔韧性项目”垂直对齐到中间？

debugcn 发表于 Dev

奥涅兹

目前，我的“ flex”项目如下所示（垂直对齐：顶部）...

 _____________________________________
   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（超薄）

.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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。