Question

我第一次玩Flexbox而且我想知道为什么没有属性align-items：flex-end使用justify-content：center。我尝试更改为其他值而不是flex-end，但仍然没有任何东西会绕十字轴移动。

这是我的HTML / CSS代码。我做错了什么？

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Playing with CSS Flexbox</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <!--
        <nav id="logo">
            <p class="logotext">Welcome There!!</p>
        </nav>
        -->
        <main id="container">
            <section class="box red-box">
                 <!--
                 <img src="images/Chilli-medium.jpg" alt="chilli" class="first-image">
                    -->
            </section>
            <section class="box green-box">
            </section>
            <section class="box blue-box">
            </section>
            <section class="box violet-box">
            </section>
            <section class="box black-box">
            </section>
            <section class="box yellow-box">
            </section>
            <section class="box grey-box">
    </body>
</html>

body {
    margin: 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
    background-color: white;

}


#container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: flex-end;


}

.box {
    padding: 50px;
    box-sizing: border-box;
    height: 50vh;
    width: 5vw;

}

.red-box {
    background-color: indianred;

}

.green-box {
    background-color: green;


}

.blue-box {
    background-color: blue;

}

.violet-box {
    background-color: rebeccapurple;


}

.black-box {
    background-color: black;
}

.yellow-box {
    background-color: yellow;
}

.grey-box {
    background-color: grey;
}

Justify-content不能使用CSS Flexbox中的align-items

0 个答案: