Как на css flexbox реализовать такую структуру из трех блоков? [требует правки]

424

08 января 2017, 18:27

|         |......................... top navigation
|  LOGO   | —————————————---------------------------
|         |..................slogan...............

Это на десктопе, а на мобильном все проще

| LOGO | 
|slogan|

Answer 1

.header {display:flex;background-color:#474747;width:100%;height:60px} 
.logo { 
  background-image: url(https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=01c1db151660),none; 
  background-position: top left; 
  background-repeat: no-repeat; 
  width: 200px; 
  height: 60px; 
} 
.main { 
  display:flex; 
  flex-direction: column; 
  width: calc(100% - 200px); 
  justify-content: space-between; 
} 
.nav {display: flex;padding:5px; justify-content: flex-end; width: 100%} 
.nav a {display: block;margin-right:10px;color: white;} 
.slogan {color:white;padding:5px;text-align:center;}

<div class="header"> 
  <div class="logo"></div> 
  <div class="main"> 
    <div class="nav"><a href="">Пункт 1</a><a href="">Пункт 2</a><a href="">Пункт 3</a></div> 
    <div class="slogan">Сто раз отмерь</div> 
  </div> 
</div>

А на мобильные реализовываете с помощью @media

Answer 2

Навигация и слоган в отдельный контейнер, если взять, то возможен такой вариант

Десктоп

А для мобильного, что-то наподобие

Мобильные

Answer 3

Ответ @Yuri доработан (удалены лишние стили) и добавлена мобильная версия.

.header { 
  display: flex; 
  background-color: #ccc; 
} 
 
.logo { 
  background-image: url(https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=01c1db151660),none; 
  background-position: top left; 
  background-repeat: no-repeat; 
  width: 200px; 
  height: 60px; 
} 
 
.main { 
  display: flex; 
  flex-direction: column; 
  /* Занимать оставшееся пространство */ 
  flex: 1; 
} 
 
.nav { 
  display: flex; 
  padding: 5px; 
  justify-content: flex-end; 
  width: 100%; 
} 
 
.nav a { 
  margin-right: 10px; 
  color: #fff; 
} 
 
.slogan { 
  color: #fff; 
  padding: 5px; 
  text-align: center; 
} 
 
@media (max-width: 600px) { 
   .header { 
     flex-direction: column; 
   } 
    
   .logo { 
     /* отцентрировать картинку */ 
     margin: 0 auto; 
   } 
    
   .nav { 
     display: none; 
   } 
}

<div class="header"> 
  <div class="logo"></div> 
  <div class="main"> 
    <div class="nav"> 
      <a href="javascript:void(0);">Пункт 1</a> 
      <a href="javascript:void(0);">Пункт 2</a> 
      <a href="javascript:void(0);">Пункт 3</a> 
    </div> 
    <div class="slogan">Сто раз отмерь</div> 
  </div> 
</div>