当其中一个容器在内部居中对齐时，对齐顶部的两个伸缩容器

Question

我有下面的代码。

我要：

1. 将占位符图像的顶部与Link1的顶部对齐。
2. 要与centered保持button的链接
3. R1 Link and the button是正确的

.header {
  background-color:green;
  display: flex;
  margin: 0 auto;
  max-width: 40rem;
}


.navbar {
  display: flex;
  justify-content: space-between;
}
 
.navbar__items {
 align-items: center;
 display: flex;
}

.navbar__items > * { 
 margin-right:  0.75rem; 
 text-decoration: none;
 }
 
.navbar__items & > *:last-child {
  margin-right: 0;
}

.button { 
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;

}

<div class="header">
        <div><img src="https://via.placeholder.com/50" /></div>
        <div>
          <div class="navbar">
            <div class="navbar__items">
              <a href="">Link 1</a>
              <a href="">Link 2</a>
              <a href="">Link 3</a>
              <a href="">Link 4</a>
            </div>
            <div class="navbar__items">
              <a href="">Link R1</a>
              <a class="button" href="">Button</a>
            </div>
          </div>  
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in<div>     
       </div> 
     </div>
</div>

Answer 1

要将按钮放在右侧，您必须将导航栏设置为100％，并在左侧导航栏上向右自动提供边距。就像下面的示例一样。

我不了解您要使用该图像实现的目标，因此，如果您可以提供更多详细信息，则可以尝试提供帮助。

.header {
  background-color:green;
  display: flex;
}


.navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
 
.navbar__items {
 align-items: center;
 display: flex;
}

.navbar__items > * { 
 margin-right:  0.75rem; 
 text-decoration: none;
 }
 
.navbar__items & > *:last-child {
  margin-right: 0;
}

.button { 
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;

}
.bar-left {
    margin-right: auto;
}
img{
    position:absolute;
   
    top:16px;
}

<div class="header">
        <div></div>
        <div class="navbar">
          <div class="bar-left navbar__items">
            <img src="https://via.placeholder.com/50" />
            <a href="">Link 1</a>
            <a href="">Link 2</a>
            <a href="">Link 3</a>
            <a href="">Link 4</a>
           </div>
           <div class="navbar__items">
             <a href="">Link R1</a>
             <a class="button" href="">Button</a>
           </div>
       </div>           
</div>

Answer 2

如果我了解您的需求，这就是您想要的？我必须为标头定义一个明确的高度，因为flexbox中没有任何东西可以使一个项目与其他项目的顶部对齐，它可以使项目与基线对齐，但是我认为这不是您想要的。

因此，我必须考虑到可以将图像垂直放置在flex容器末端的大小，使其与文本顶部对齐。让我知道！

.header {
  background-color:green;
  display: flex;
  height: 89px;
}


.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
 
.navbar__items {
 align-items: center;
 display: flex;
 vertical-align: text-top;
}

.navbar__items > * { 
 margin-right:  0.75rem; 
 text-decoration: none;
 }
 
.navbar__items & > *:last-child {
  margin-right: 0;
}

.button { 
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;

}

.right {
  margin-left: auto;
}

.image {
  display:block;
}

.box {
  align-self: flex-end;
}

<div class="header">
        <div class="box"><img src="https://via.placeholder.com/50" class="image"/></div>
        <div class="navbar">
          <div class="navbar__items">
            <a href="">Link 1</a>
            <a href="">Link 2</a>
            <a href="">Link 3</a>
            <a href="">Link 4</a>
           </div>
           <div class="navbar__items right">
             <a href="">Link R1</a>
             <a class="button" href="">Button</a>
           </div>
       </div>           
</div>