复制YouTube上的导航栏，但是，我一直在使用位置的习惯：绝对的;我需要这样做的更有效的方法

Question

这是DRY代码的缩影，我需要找到编写这些代码的有效途径。我目前使用的奥丁项目和准则是复制的Youtube的视频部分。我完成了导航栏，但我不满意它，因为我只是用的位置是：绝对的所有时间。我正要使用网格或Flexbox的，但我真的不知道这是否会有所帮助。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f8f8f8;
}

.navigation {
  height: 70px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 1px 4px #ebebeb;
}

.menu {
  position: absolute;
  left: 30px;
  top: 22px;
  opacity: .4;
  cursor: pointer;
}

.menu:hover {
  opacity: 1;
}

.youtube-logo {
  width: 90px;
  position: absolute;
  left: 70px;
  top: 10px;
}

.search-bar {
  position: absolute;
  top: 21px;
  left: 390px;
  width: 600px;
  height: 33px;
  background: url(images/search.svg) no-repeat 95% 50%;
  background-size: 16px;
  border-radius: 2px;
  border: 1px solid #b3b3b3;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
}

 ::placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  padding-left: 3px;
}

.video {
  position: absolute;
  left: 1150px;
  top: 25px;
  cursor: pointer;
  opacity: .4;
}

.stack {
  position: absolute;
  left: 1210px;
  cursor: pointer;
  width: 18px;
  opacity: .4;
  top: 27px;
}

.message {
  position: absolute;
  left: 1265px;
  top: 24px;
  ;
  opacity: .4;
  cursor: pointer;
}

.bell {
  position: absolute;
  left: 1320px;
  top: 23px;
  opacity: .4;
  cursor: pointer;
}

.icon {
  position: absolute;
  top: 16px;
  left: 1374px;
  cursor: pointer;
  width: 36px;
  opacity: .4;
}

<nav class="navigation">
  <img src="images/menu.svg" alt="menu for the top left, shaped like a hamburger" class="menu">

  <img src="images/youtube.logo.png" alt="youtube logo" class="youtube-logo">

  <input type="text" name="searchbar" placeholder="Search" class="search-bar">

  <img src="images/video.svg" alt="video icon" class="video">

  <img src="images/google-app-button.png" alt="square stacks" class="stack">

  <img src="images/message-square (1).svg" alt="message forr youtube" class="message">

  <img src="images/bell.svg" alt="bell for top right bar" class="bell">

  <img src="images/icons8-male-user-512.png" alt="profile picture for the bar" class="icon">

</nav>

Answer 1

Flexbox将是非常直截了当。你只需要设置display: flex;父元素和子元素会受到影响。

.parent-flex {
  display: flex;
}

<h2>Without Flexbox</h2>
<div>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

<h2>With Flexbox</h2>
<div class="parent-flex">
  <div class="child-1">Child 1</div>
  <div class="child-2">Child 2</div>
  <div class="child-3">Child 3</div>
</div>

既然你正试图复制YouTube的导航栏，我推荐使用Flexbox的设置在导航栏的“区域”，然后同样适用justify-content: space-between;空间出来的区域。

.flex {
  display: flex;
}

.parent {
  justify-content: space-between;
}

.child-1 {}

.child-2 {}

.child-3 {
  justify-content: flex-end;
}

<div class="flex parent">
  <div class="flex child-1">
    <div class="menu">[Menu Icon]</div>
    <div class="logo">[Logo]</div>
  </div>
  <div class="flex child-2">
    <div class="search-box">[search box]</div>
    <div class="search-button">[search button]</div>
  </div>
  <div class="flex child-3">
    <div class="user-photo">[the user's photo]</div>
    <div class="etc">[whatever other icons...]</div>
  </div>
</div>

您可以检查出的CSS-技巧这篇大文章，详细了解Flexbox的的来龙去脉。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/