html - 如何在父容器显示 flex 时显示子 div 的内联 block ？

Question

当父 div 标签显示为 flex 时，我无法并排显示我的子 div 标签，如果有人能告诉我如何让它工作，那就太好了!这是我的代码示例:

CSS

    .wrapper{
    z-index: +1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: baseline;
    justify-content: space-around;
}
.wrapper .logo{
    outline: 1px solid #fff;
    width: 400px;
    height: 150px;
}
.wrapper .logo img{
    width: 100%;
}
.wrapper .discription{
    width: 320px;
    outline: 1px solid #fff;
}
.wrapper .discription h1{
    color: #fff;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}
.wrapper .links{
    outline: 1px solid #fff;
}
.wrapper .links nav ul{
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.wrapper .links nav ul li{
    display: block;
}
.wrapper .links nav ul li a{
    font-size: 20px;
    color: #fff;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}

html

   <div class="wrapper">
        <div class="logo">
            <img src="images/fire-engine.png" draggable="false">
        </div>
        <div class="discription">
            <header>
                <h1>Best non-host mw2 menu cheat engine [cex/dex]</h1>
            </header>
        </div>
        <div class="links">
            <nav>
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">pricing</a></li>
                    <li><a href="#">support</a></li>
                    <li><a href="#">login</a></li>
                </ul>
            </nav>
        </div>
    </div>

我正在尝试做的，类似于:

Answer 1

只需保留 display: flex 并删除 .wrapper 中的 flex-direction: column 因为当你有 display: flex 时 flex-direction 默认是行。

.wrapper{
    z-index: +1;
    display: flex;
    height: 100vh;
    align-items: baseline;
    justify-content: space-around;
}

https://jsfiddle.net/nL27af3z/1/