Как правильно сверстать flexbox?

477

24 июня 2017, 10:18

Никак не получается выровнять .logo по центру, при этом чтобы два элемента меню .right-items прижимались к правому краю

menu { 
  align-items: center; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
} 
 
menu .items { 
  margin: 0 20px; 
  flex-basis: 50%; 
} 
 
menu .items.left { 
  text-align: right; 
} 
 
menu .items.right {} 
 
menu .items a { 
  margin: 0 12.5px; 
  font-size: 14px; 
  text-transform: uppercase; 
} 
 
menu .items .right-items { 
  font-size: 14px; 
  text-transform: uppercase; 
} 
 
menu .logo { 
  flex-basis: 100px; 
  width: 100px; 
  height: 100px; 
  background: #000; 
}

<menu> 
  <div class="items left"> 
    <a href="">Пункт</a> 
    <a href="">Пункт</a> 
  </div> 
 
  <div class="logo"></div> 
 
  <div class="items right"> 
    <a href="">Пункт</a> 
    <a href="">Пункт</a> 
    <a href="">Пункт</a> 
 
    <a href="" class="right-items">Пункт</a> 
    <a href="" class="right-items">Пункт</a> 
  </div> 
</menu>

Answer 1

Если задача стоит именно на flex то вот, можно конечно еще чистить код но ваша задача решена. Вкратце обернуть пункты в свои дивы и растянуть.

a { 
  margin: 0 12.5px; 
  font-size: 14px; 
  text-transform: uppercase; 
} 
 
menu { 
  display: flex; 
  align-items: center; 
  flex-direction: row; 
  justify-content: space-between; 
} 
 
menu .items { 
  margin: 0 20px; 
  flex-basis: 50%; 
} 
 
.left { 
  text-align: right; 
} 
 
.right { 
  display: flex; 
  justify-content: space-between; 
} 
 
menu .logo { 
  flex-basis: 100px; 
  width: 100px; 
  height: 100px; 
  background: #000; 
}

<menu> 
  <div class="items left"> 
    <a href="">Пункт</a> 
    <a href="">Пункт</a> 
  </div> 
 
  <div class="logo"></div> 
 
  <div class="items right"> 
 
    <div class=""> 
      <a href="">Пункт</a> 
      <a href="">Пункт</a> 
      <a href="">Пункт</a> 
    </div> 
 
    <div class=""> 
      <a href="" class="right-items">Пункт</a> 
      <a href="" class="right-items">Пункт</a> 
    </div> 
 
  </div> 
</menu>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

C# SSL соединение xNet, WebRequest

Доброго времени суток, помогите решить проблему : при попытке сделать запрос на сайт sscasinoonline дает ошибку xNet

1689

Обновить значение вычисляемого поля

Как можно обновить через код значение вычисляемого поля в проекте? При открытии в project'e в толстом клиенте - поле обновляется само и сохраняется...

314

Настройка политики доступа к службе WCF

У меня есть веб приложение MVC в него встроен wcf сервисПри отладке и разработке никаких проблем с ним не возникало, а как только я развернул...

428

C# Нужна помощь с ускорением кода

Использую Syncfusion GridControl в качестве таблицы

306