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

Posted 2023-02-22

【中文标题】CSS Flex Box：如何在不丢失弹性项目高度的情况下将“弹性项目”垂直对齐到中间？

【英文标题】：CSS Flex Box: How to vertically align "flex items" to middle without losing flex item height?

【发布时间】：2014-06-19 23:55:37

【问题描述】：

目前我的“flex”项目看起来像这样（垂直对齐：顶部）...

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________

我的目标是让它们看起来像这样（垂直对齐：中间）...

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________

我的要求：

flex 容器必须保持 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; 

【参考方案1】：

也许我理解错了，但你不能这样做：

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

【参考方案2】：

要垂直对齐 flexbox 子元素的内容，您需要应用一些其他技术。

我相信那里会有内容，包裹在标签中，然后您可以再次使用flex并在margin:auto;中设置child DEMO

---

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;

【讨论】：

@MrRioku 欢迎您。 flex 非常好，它仍然需要后备。这里 display:table/table-cell 可以在旧版浏览器中开始 jsfiddle.net/p4XtA/5

是的，我同意。我实际上是在考虑尝试使用我的网格系统来进行回退，但想到表格（尽管这样说让我很生气）将是 flexbox 的完美回退解决方案。我的朋友做得很好。

似乎您也可以从部分 > div 中删除 height: 25% 并替换为 flex: 1;这将把它们平均分配。

正是 :) 就是这样 :)

【参考方案3】：

这是解决您问题的 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;

【参考方案4】：

你的问题其实和所谓的flex-box没什么关系，其实你要对齐的是div的内容（不是div），所以就用一些将其正常对齐的技巧。这是其中的技巧之一：

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

Demo.

【讨论】：

棘手！但仍然有点 hack - 我没有抱怨，我认为它很棒.. 但我想 Flex Box 会有一些东西来控制这种事情？

这不是 hack，它是 CSS :) 对于 flexox child，只需使用 margin:auto;

touche` 哈哈....但说真的。 flex 的制造商对此没有任何帮助吗？几天来我一直在尝试使用“flex 方法”并且已经接近但没有雪茄

@MrRioku 当然，它只能控制 flex item 而不能控制 flex item 的内部内容。