Question

我想使用flex将徽标，标题字段和登录按钮对齐在一行中。徽标应具有flex-start，标头字段应居中，按钮应具有flex-end。我该如何实现。提前感谢。

             <div class="header">
                    <div class="header_topics">
                        <ul  style="display:flex;justify-content:center;">
                                    <li ><a href= "#"  > <span>Home</span></a></li>
                                    <li ><a href="#" ><span> About</span></a></li>

                                    <li><a href="#" ><span>Contact</span></a></li>
                                </ul>
                    </div>

                     <div class="signinx" style="display:flex;justify-content:flex-end">

                                    <div class="signin" >&nbsp;<a href="#">Signin&nbsp;<i class="fas fa-user"></i></a></div>
                     </div>

                </div>

Answer 1

使用flexbox时，应在父元素中声明布局，在您的情况下为.header。如果我们使用justify-content: space-between，则子元素将根据需要排列。请注意，我们现在如何删除所有以前的子弹性样式。父级控制布局。

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}

ul { margin: 0; }

<header class="header">
  <div class="logo">
    <img src="https://placekitten.com/70/60" alt="">
  </div>
  <div class="header_topics">
    <ul>
      <li><a href="#"> <span>Home</span></a></li>
      <li><a href="#"><span> About</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>

  <div class="signinx">
    <div class="signin">&nbsp;<a href="#">Signin&nbsp;<i class="fas fa-user"></i></a></div>
  </div>

</header>

jsFiddle

是否可以将flex-start，flex center和flex-end放在一行中

1 个答案: