html - 如何使用 flexbox 将 block 中的第三个元素向下移动？

Question

如何将第三个元素向下移动，第一个带有 Logo 的 block ，第二个其他全宽度包含另一个面板，向下移动将是另一个面板？ 这个 block (pastenow.ru/57IX6) 需要移动，它必须是这样的:pastenow.ru/57IXE

<nav class="navbar">

<!--start of top_panel-->
<div class="logo"><img src="img/logo.png" alt=""> </div>

<div class="panel"> 
    <div class="nav_title">С нами ловят все!</div>
    <div class="phone">8 800 553535</div>
    <div class="address_wrapper">
        <div class="address">Павлодар, ул. Мира 7</div>
        <div class="address">Павлодар, ул. Мира 8</div>
    </div>
    <div class="call_btn def_btn">Заказать звонок</div>
</div>
<!--end of top_panel-->
<!--start of bottom_panel-->
<div class="bottom_panel">
    <div class="main">Главная</div>
    <div class="about_us">компании</div>
    <div class="tournament">Турниры</div>
    <div class="goods">Товары</div>
    <div class="news">Новости</div>
    <div class="photo">Фото</div>
    <div class="video">Видео</div>
    <div class="contact">Контакты</div>
    <div class="social_icons_wrapper">
        <div ><a href="#" target="_blank"><i class="fa fa-youtube icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-instagram icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-vk icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-whatsapp icon_size" aria-hidden="true"></i></a></div>
        <div><a href="#" target="_blank"><i class="fa fa-telegram icon_size" aria-hidden="true"></i></a></div>
    </div>
</div>
<!--end of bottom_panel-->

如果添加 flex-wrap: wrap;所以一切都失败了，但我只需要一个。

CSS

.container{
    width: 1170px;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    font-family: "Museo Cyrl 900";
}

.header_line{
    width: 100%;
    height: 122px;
    background-color: #fff;
}

.navbar{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}

.logo{
    width: 200px;
    height: auto;
}

.panel{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}
.bootom_panel{
    width: 100%;
    display:inline-flex;
    justify-content: flex-end;
}

Answer 1

我做了一个 codepen 演示，对您提供的布局进行了轻微调整。请点击此链接:https://codepen.io/ArunK_UI/pen/qwbXLm?editors=1100

这里的主要变化是我将上面板和下面板包装在一个包装器中，然后赋予它们各自的属性。

<div class="panel-wrap">
  <div class="panel"></div>
  <div class="bottom_panel"></div>
</div>