0

尝试跟随 Ben Frain Responsive Web Design with HTML5 and CSS3 - 第二版第 3 章讨论 flexbox 的使用。在本章的最后，我们（在 jsfiddle 上）得到了一个看起来很不错的示例，直到我添加了更多的 HTML 容器，例如段落和标题。看看这里会发生什么。

因此以列格式创建了另一组框。我当然想要盒子顶部的 h1 标题。我意识到 h1 容器必须用 CSS 编码，但我已经看了好几个小时了，一直没能找到解决方案。我担心的是：我在 Flexbox 上找到的培训并没有解决协议要求在将新的 HTML 容器添加到盒子时创建另一个孩子的方式。请使用 jsfiddle 提供的代码运行解决方案的任何示例，以验证它是否有效。

非常感谢，

这是代码

射线

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    color: #ebebeb;}

.FlexWrapper {
    background-color: indigo;
    display: flex;
    flex-direction: column;
}

.FlexItems {
    display: flex;
    align-items: center;
    min-height: 6.25rem;
    padding: 1rem;
}

.FlexHeader {
    background-color: #105B63;
    order: 1;
}

.FlexContent {
    background-color: #FFFAD5;
    order: 2;
    color: blue;
}

.FlexSideOne {
    background-color: #FFD34E;
    order: 3;
    color: crimson;
}

.FlexSideTwo {
    background-color: #DB9E36;
    order: 4;
    color: black;
}

.FlexFooter {
    background-color: #BD4932;
    order: 5;
}

@media (min-width: 30rem) {
    .FlexWrapper {
        flex-flow: row wrap;
    }
    .FlexHeader {
        width: 100%;
    }
    .FlexContent {
        flex: 1;
        order: 3;
    }
    .FlexSideOne {
        width: 150px;
        order: 2;
    }
    .FlexSideTwo {
        width: 150px;
        order: 4;
    }
    .FlexFooter {
        width: 100%;
    }
}
© 2021 GitHub, Inc.
<!doctype html>
<html lang="en">
<head>
    <link href="http://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="FlexWrapper">
        <div class="FlexItems FlexContent"><h1>I am content in the Content.</h1><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p>
        </div>
        <div class="FlexItems FlexSideOne">I am content in the SideOne.
            
        </div>
        <div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>
        <div class="FlexItems FlexHeader">I am content in the Header.</div>
        <div class="FlexItems FlexFooter">I am content in the Footer.</div>
    </div>
</body>
</html>

4

2 回答 2

0

如果我明白你在问什么......这是因为默认情况下，该flex-wrap值为no-wrap. 将其设置为wrapflex container/parent .FlexItems。

flex-wrap: wrap;

这将允许元素换行到下一行。

于 2021-04-18T01:11:38.933 回答
0

您可以将display:flex和添加flex-direction: column到FlexContentCSS 选择器。这会将 div 设置为 flex 并使其 flex 方向垂直，堆叠在标签内容的h1顶部。p

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    color: #ebebeb;}

.FlexWrapper {
    background-color: indigo;
    display: flex;
    flex-direction: column;
}

.FlexItems {
    display: flex;
    align-items: center;
    min-height: 6.25rem;
    padding: 1rem;
}

.FlexHeader {
    background-color: #105B63;
    order: 1;
}

.FlexContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFAD5;
    order: 2;
    color: blue;
}

.FlexSideOne {
    background-color: #FFD34E;
    order: 3;
    color: crimson;
}

.FlexSideTwo {
    background-color: #DB9E36;
    order: 4;
    color: black;
}

.FlexFooter {
    background-color: #BD4932;
    order: 5;
}

@media (min-width: 30rem) {
    .FlexWrapper {
        flex-flow: row wrap;
    }
    .FlexHeader {
        width: 100%;
    }
    .FlexContent {
        flex: 1;
        order: 3;
    }
    .FlexSideOne {
        width: 150px;
        order: 2;
    }
    .FlexSideTwo {
        width: 150px;
        order: 4;
    }
    .FlexFooter {
        width: 100%;
    }
}
© 2021 GitHub, Inc.
<!doctype html>
<html lang="en">
<head>
    <link href="http://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="FlexWrapper">
        <div class="FlexItems FlexContent"><h2>Subheader</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p>
        </div>
        <div class="FlexItems FlexSideOne">I am content in the SideOne.
            
        </div>
        <div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>
        <div class="FlexItems FlexHeader"><h1>I am content in the Header.</h1></div>
        <div class="FlexItems FlexFooter">I am content in the Footer.</div>
    </div>
</body>
</html>

于 2021-04-18T01:14:33.403 回答