Расположение элементов flexbox

462

02 января 2017, 21:38

Есть код:

.menu { 
  width: 90%; 
  height: 100px; 
  background-color: #fff; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-left: 5%; 
  padding-right: 5%; 
} 
.menu__category li { 
  display: inline; 
  padding: 20px; 
} 
.menu__category a { 
  padding-bottom: 36px; 
  transition: all 0.2s ease; 
  color: black; 
} 
.menu__category a:hover { 
  border-bottom: 6px solid #ec4e4e; 
  color: #ec4e4e; 
} 
.menu__social i { 
  padding: 10px; 
  transition: color 0.2s ease; 
} 
.menu__social i:hover { 
  color: #ec4e4e; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
<div class="menu"> 
  <div class="menu__logo"> 
    <img src="img/logo.png" alt="logo"> 
  </div> 
  <div class="menu__category"> 
    <ul> 
      <li> 
        <a href="#">Главная</a>  
      </li> 
      <li> 
        <a href="#">Новинки</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
    </ul> 
  </div> 
  <div class="menu__social"> 
    <i class="fa fa-facebook" aria-hidden="true"></i> 
    <i class="fa fa-twitter" aria-hidden="true"></i> 
    <i class="fa fa-instagram" aria-hidden="true"></i> 
  </div> 
</div>

Хочу сделать так, чтобы при уменьшени экрана (на планшете, допустим) логотип и ссылки были в один ряд, а меню переносилось на следующий. Не знаю как реализовать. Заранее спасибо за помощь.

Answer 1

Вам по сути нужна отдельная разметка с media-query под маленькие разрешения (к примеру, возьмём до 800px в ширине).

@media (max-width: 800px) {
  .menu {
    /* Чтобы header мог занимать много строк */
    flex-wrap: wrap;
  }
  .menu__category {
    /* Чтобы меню занимало всю строку */
    width: 100%;
    /* Чтобы меню было в самом конце */
    /* можете поставить другое число, главное >= 1 */
    order: 9999;
  }
}

Весь пример

.menu { 
  width: 90%; 
  height: 100px; 
  background-color: #fff; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-left: 5%; 
  padding-right: 5%; 
} 
.menu__category li { 
  display: inline; 
  padding: 20px; 
} 
.menu__category a { 
  padding-bottom: 36px; 
  transition: all 0.2s ease; 
  color: black; 
} 
.menu__category a:hover { 
  border-bottom: 6px solid #ec4e4e; 
  color: #ec4e4e; 
} 
.menu__social i { 
  padding: 10px; 
  transition: color 0.2s ease; 
} 
.menu__social i:hover { 
  color: #ec4e4e; 
} 
 
@media (max-width: 800px) { 
  .menu { 
    flex-wrap: wrap; 
  } 
   
  .menu__category { 
    width: 100%; 
    order: 9999; 
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="menu"> 
  <div class="menu__logo"> 
    <img src="img/logo.png" alt="logo"> 
  </div> 
  <div class="menu__category"> 
    <ul> 
      <li> 
        <a href="#">Главная</a>  
      </li> 
      <li> 
        <a href="#">Новинки</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
      <li> 
        <a href="#">Link</a> 
      </li> 
    </ul> 
  </div> 
  <div class="menu__social"> 
    <i class="fa fa-facebook" aria-hidden="true"></i> 
    <i class="fa fa-twitter" aria-hidden="true"></i> 
    <i class="fa fa-instagram" aria-hidden="true"></i> 
  </div> 
</div>

Также можно улучшить данный пример, добавив в общие стили (не внутрь media query):

.menu__category ul {
  /* Чтобы меню гарантированно было на одной строке */
  /* Так как по умолчанию стоит flex-wrap: nowrap; для flexbox */
  display: flex;
  /* Удалить padding для ul по умолчанию */
  padding: 0;
  /* Расположить контент по центру */
  justify-content: center;
}

На мобильных устройствах также можно уменьшить padding для .menu__category ul li, например, установив меньше значение (10px, 5px и т.д.) или просто установить в процентах. Также можно уменьшить или удалить padding для .menu.