我有一个navbar，在左侧角有logo和一些页面，徽标和页面链接都在不同的div中。我希望名为navbar的div在调整窗口大小时具有响应性，我只希望改变宽度。

我的代码:

<div class="top">
      <div class="logo">
      <a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
      </div>
      <div class="navbar">
        <a href="">HOME</a>
        <a href="">ABOUT</a>
        <a href="">CONTACTS</a>

我当前的CSS:

<div class="top">
      <div class="logo">
      <a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
      </div>
      <div class="navbar">
        <a href="">HOME</a>
        <a href="">ABOUT</a>
        <a href="">CONTACTS</a>

我希望navbar div填充徽标旁边的整个水平空间。

顺晟科技：

FlexBox可以解决此问题。

<div class="top">
      <div class="logo">
      <a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
      </div>
      <div class="navbar">
        <a href="">HOME</a>
        <a href="">ABOUT</a>
        <a href="">CONTACTS</a>

CSS:

<div class="top">
      <div class="logo">
      <a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
      </div>
      <div class="navbar">
        <a href="">HOME</a>
        <a href="">ABOUT</a>
        <a href="">CONTACTS</a>

for当我们声明时，这意味着容器将被视为flexbox容器，默认情况下，它将在一行中呈现任何子容器。

只需要一条指令，该指令告诉浏览器：使用

简单而强大！

这是一个很好的关于FlexBox的文档： https://css-tricks.com/snippets/css/a-guide-to-flexbox/