Выровняйте два верхних гибких контейнера, когда один из контейнеров выровнен по центру

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

Если бы я понял ваши потребности, это было бы то, что вы ищете? Мне пришлось определить явную высоту для вашего заголовка, поскольку в flexbox нет ничего, что могло бы выровнять элемент по верху другого элемента, оно могло бы выровнять элементы по базовой линии, но я думаю, что это не то, что вы хотите.

Так что мне пришлось учесть размер, позволяющий поместить изображение в конец гибкого контейнера вертикально, чтобы оно совпало с верхом текста. Дайте мне знать!

.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>

Answer 2

, чтобы поместить кнопку справа, вы должны установить вашу навигационную панель на 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>