html - 让 div 进入 flex 容器

Question

我正在尝试为导航栏实现以下响应行为。
这是我在大屏幕上想要的结果:

在小屏幕上(Iphone 8 和类似设备):

我使用 flexbox 创建了导航栏，我想到的可能解决方案是使用 flex-wrap: wrap;但是我需要找到一种方法，仅在屏幕较小时使两个链接(带有 tmp 类)下降，并在屏幕较小时保持 Logo 和“S'inscrire”链接。
我不确定 flexbox 是否是实现这一目标的最佳方式，但这是我尝试过的，我愿意接受任何更好的解决方案。

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
}

.tmp {}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media only screen and (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        width: 100%;
    }
}

<nav class="navigation">
   <img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
   <ul class="navigation__items">
      <div class="tmp">
         <li class="navigation__item"><a href="#">Hébergements</a></li>
         <li class="navigation__item"><a href="#">Activités</a></li>
      </div>
      <li class="navigation__item subscribe">
         <a href="#">S'inscrire</a>
      </li>
   </ul>
</nav>

PS:带有“tmp”类的div最初并不存在于代码中，我添加它只是为了表明我的想法。

Answer 1

关注 给您的 html <ul> 的结构标签。在里面放<div>标签，分隔第三个 <li>前两个的标签。这是不正确它不是有效的 html 结构体。这是一个 拐杖 .
在我的示例中，我正确设置了列表结构。所有三个 <li>标签现在是 <ul> 的子代标签。
现在关于主要的事情。
第三次转让的原理<li>标签(订阅类)基于 绝对定位 .
包装前两个 <li>标签在 触发767 像素 宽度。
然而，在我的示例中，我没有使用其他类型的显示，例如网格、表格、 block 等。只有 flex 用来。
此外，调整了点击下划线。

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation img { /*for test*/
    width: 100px;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        /*width: 100%;*/
    }
}

@media (max-width: 767px) {
    .navigation {
        position: relative;
    }
    
    .navigation__items {
        width: 100%;
    }
    
    .navigation__item a {
        display: flex;
        justify-content: center;
        padding: 11px 0;
    }
    
    .navigation__item {
        flex: auto;
        text-align: center;
    }
    
    .navigation__item.subscribe {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .navigation__item a:active {
        border-top: unset;
        border-bottom: 2px solid #0065fc;
    }
}

<nav class="navigation">
    <img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
    <ul class="navigation__items">
        <li class="navigation__item"><a href="#">Hébergements</a></li>
        <li class="navigation__item"><a href="#">Activités</a></li>
        <li class="navigation__item subscribe"><a href="#">S'inscrire</a></li>
    </ul>
</nav>