垂直对齐包含页眉和页脚的 flexbox 子项中的内容答案

【问题标题】：Vertically align the content in a flexbox child that includes a header and footer垂直对齐包含页眉和页脚的 flexbox 子项中的内容
【发布时间】：2023-03-27 17:15:02
【问题描述】：

我正在重新设计我的网站，并且刚刚发现 (!) Flexbox，它的用途非常广泛，我已经掌握了它。

我正在使用 Flexbox 创建一行四个项目。每个项目都有一个页眉、内容和页脚。内容会有所不同，因此 Flexbox 非常方便，因为它会根据需要进行调整。

我的目标是让四个项目的尺寸相同，每个项目的页眉和页脚水平对齐。每个项目中的内容大小会有所不同。

经过大量的实验和在这里和其他地方的阅读，我设法使用 ::before 和 ::after 伪元素来分别指定页眉和页脚。

唯一的问题是为每个项目的内容指定不同的字体大小作为百分比会影响伪元素的字体大小。因此，如果框 1 中的内容字体大小与框 2 不同，我将不得不调整页眉和页脚的值，以使它们在每个框中显示相同。

我对此的解决方案是将伪元素的字体大小指定为像素/ems，或者分别为页眉和页脚添加一个，然后使用 CSS 定位它们。后者的问题在于 HTML 和 CSS 变得更加复杂。

我附上了 HTML 和 CSS 来说明这两种方法：

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox experiment</title>
<link rel="stylesheet" type="text/css" href="CSS/Flex_test.css">
</head>

<body>
<h1>Flexbox experiment</h1>
<p>The goal is to provide four boxes evenly spaced with the same vertical and horizontal dimensions that will change to accommodate varying content.  Each has a header and footer that should be aligned with its neighbour.</p>
<h2>Divs for header and footer:</h2>
<section id="FlexRow1">                     
    <div id="Column1">
        <div id="Column1Header"></div>
        <div id="Column1Content">
        <ul>
            <li>Details 1</li>
            <li>Details 2</li>
            <li>Details 3</li>
        </ul>
        </div>
        <div id="Column1Footer"></div>
    </div>
    <div id="Column2">
        <div id="Column2Header"></div>
        <div>4</div>
        <div id="Column2Footer"></div>
    </div>
    <div id="Column3">
        <div id="Column3Header"></div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
        <div id="Column3Footer"></div>
    </div>
    <div id="Column4">
        <div id="Column4Header"></div>
        <div id="Column4Content">1, 4, 8</div>
        <div id="Column4Footer"></div>
    </div>
</section>
<h2>Header and footer specified as pixels in CSS:</h2>
<section id="FlexRow2">                     
    <div id="Column1">
        <ul>
            <li>Details 1</li>
            <li>Details 2</li>
            <li>Details 3</li>
        </ul>
     </div>
    <div id="Column2">4</div>
    <div id="Column3">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div id="Column4">1, 4, 8</div>
</section>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */


section > div {
    border: 1px solid steelblue;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    text-align: center;
}

/*FlexRow 1 */
#FlexRow1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #D4D1EF;
    padding: 10px 10px;
}

/* Column 1 */
#FlexRow1 #Column1 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:10px 10px;
}

#FlexRow1 #Column1::before {
    content:"Column 1 Header";
}

#FlexRow1 #Column1::after {
    content:"Column 1 Footer";
}

#FlexRow1 #Column1::before, #FlexRow1 #Column1::after {
    font-size:80%;
}

#FlexRow1 #Column1Content {
    font-size:90%;
}

#FlexRow1 #Column1Content > ul {
    list-style: none outside none;
    padding: 0;
}

#FlexRow1 #Column1 li:nth-child(1) {
    font-weight: bold;
}

#FlexRow1 #Column1 li:nth-child(2) {
    font-size: 80%;
}

#FlexRow1 #Column1 li:nth-child(3) {
    font-size: 70%;
}

/* Column 2 */
#FlexRow1 #Column2 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:10px 10px;
}

#FlexRow1 #Column2::before {
    content:"Column 2 Header";
}

#FlexRow1 #Column2::after {
    content:"Column 2 Footer";
}

#FlexRow1 #Column2::before, #FlexRow1 #Column2::after {
    font-size:80%;
}

#FlexRow1 #Column2 > div {
    font-size: 150%;
}

/* Column 3 */
#FlexRow1 #Column3 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:10px 10px;
}

#FlexRow1 #Column3::before {
    content:"Column 3 Header";
}

#FlexRow1 #Column3::after {
    content:"Column 3 Footer";
}

#FlexRow1 #Column3::before, #FlexRow1 #Column3::after {
    font-size:80%;
}

#FlexRow1 #Column3 > ul {
    list-style: none outside none;
    padding:0;
    font-size: 130%;
}

#FlexRow1 #Column3 li:nth-child(1) {
    font-weight: bold;
}

#FlexRow1 #Column3 li:nth-child(2) {
    font-size: 80%;
}

/* Column 4 */
#FlexRow1 #Column4 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:10px 10px;
}

#FlexRow1 #Column4::before {
    content:"Column 4 Header";
}

#FlexRow1 #Column4::after {
    content:"Column 4 Footer";
}

#FlexRow1 #Column4::before, #FlexRow1 #Column4::after {
    font-size:80%;
}

#FlexRow1 #Column4Content {
    font-size:150%;
}

/*FlexRow2 */
#FlexRow2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ECCCED;
    padding: 10px 10px;
}
#FlexRow2 >div {
    flex-direction:column;
    justify-content:space-betweeen;
}
/* Column 1 */
#FlexRow2 #Column1::before {
    content:"Column 1 Header";
    font-size: 12px;
}
#FlexRow2 #Column1::after {
    content:"Column 1 Footer";
    font-size: 12px;
}
#FlexRow2 #Column2 {
    font-size:150%;
}

#FlexRow2 #Column1 > ul {
    list-style: none outside none;
    padding:0;
}

#FlexRow2 #Column1 li:nth-child(1) {
    font-weight: bold;
}

#FlexRow2 #Column1 li:nth-child(2) {
    font-size: 80%;
}

#FlexRow2 #Column1 li:nth-child(3) {
    font-size: 70%;
}

/* Column 2 */
#FlexRow2 #Column2::before {
    content:"Column 2 Header";
    font-size: 12px;
}
#FlexRow2 #Column2::after {
    content:"Column 2 Footer";
    font-size: 12px;
}
#FlexRow2 #Column2 {
    font-size:150%;
}

/* Column 3 */

#FlexRow2 {
    margin-top:2em;
    background-color:#ECCCED;
}
#FlexRow2 #Column3::before {
    content:"Column 3 Header";
    font-size: 12px;
}
#FlexRow2 #Column3::after {
    content:"Column 3 Footer";
    font-size: 12px;
}
#FlexRow2 #Column3 {
    font-size:150%;
}

#FlexRow2 #Column3 > ul {
    list-style: none outside none;
    padding:0;
}

#FlexRow2 #Column3 li:nth-child(1) {
    font-weight: bold;
}

#FlexRow2 #Column3 li:nth-child(2) {
    font-size: 80%;
}

/* Column 4 */
#FlexRow2 #Column4::before {
    content:"Column 4 Header";
    font-size: 12px;
}
#FlexRow2 #Column4::after {
    content:"Column 4 Footer";
    font-size: 12px;
}
#FlexRow2 #Column4 {
    font-size:150%;
}

我的第一个解决方案有什么缺点吗？
有更好的方法吗？
为不支持 flexbox 的浏览器提供回退的最佳方法是什么？

谢谢！

【问题讨论】：

您能否为您的示例创建一个jsfiddle.net，以便更好地了解您要实现的目标。
jsfiddle 新手，所以这里是：jsfiddle.net/agould/yxcadtm5

标签： css vertical-alignment pseudo-element flexbox

【解决方案1】：

你可以在你的弹性容器上使用。

align-items: center;

这将垂直对齐所有内容。

【讨论】：

感谢 Tom，但第二个示例中文本相对大小的问题仍然存在。我想知道最好的办法是在ems中指定页眉和页脚的字体大小。