Question

我正在重新设计我的网站并刚刚发现（！）Flexbox，它真的很多功能，而且我一直在掌握它。

我正在使用Flexbox创建一个包含四个项目的行。每个项目都有标题，内容和页脚。内容会有所不同，因此Flexbox非常方便，因为它会进行调整以适应。

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

经过大量的实验并在此处和其他地方阅读后，我设法使用:: before和:: after pseudlelements分别指定页眉和页脚。

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

我对此的解决方案是将伪元素的字体大小指定为像素/ ems，或者分别为页眉和页脚添加a，然后使用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的浏览器提供回退的最佳方法是什么？

谢谢！

Answer 1

您可以在Flex容器上使用。

align-items: center;

这将垂直对齐所有内容。

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

1 个答案: