2

Есть меню на flexbox верстке, нужно сделать чтобы были перегородки между меню, при чем чтобы был одинаковое расстояние между пунктами до перегородки и после (это получилось сделать), а также то же расстояние от левого края меню до первого пункта меню после последнего пункта до правого края (это не получается получить этим методом)

.header_left_menu {
  height: 100%;
  border: 1px solid #dddddd;
  height: 85px;
}

.header_left_menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}

.header_left_menu ul li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
  float: left;
}

.header_left_menu ul li:after {
  content: "";
  border-right: 1px solid #dddddd;
  height: 85px;
  margin: auto;
}

.header_left_menu ul li:last-child {
  -webkit-box-flex: inherit;
  -ms-flex: inherit;
  flex: inherit;
}

.header_left_menu ul li:last-child:after {
  border-width: 0px
}
<div class="header_left_menu">
  <ul>
    <li><a href="#">А</a></li>
    <li><a href="#">В и еще немного текста</a></li>
    <li><a href="#">ССС</a></li>
    <li><a href="#">DDDD</a></li>
  </ul>
</div>

1 ответ 1

1

flex: 1 1 auto

flex-grow: 1 как много свободного пространства во flex-контейнере должно быть назначено текущему элементу
flex-shrink: 1 насколько сжиматься
flex-basis: auto базовый размер флекса

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.header_left_menu {
  border: 1px solid #dddddd;
}

.header_left_menu ul {
  display: flex;
}

.header_left_menu ul li {
  min-height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
}

.header_left_menu ul li:not(:last-child) {
  border-right: 1px solid #dddddd;
}
<div class="header_left_menu">
  <ul>
    <li><a href="#">Флексыыы силаааа ааааа</a></li>
    <li><a href="#">Повод</a></li>
    <li><a href="#">Кому </a></li>
    <li><a href="#">Аксессуары </a></li>
  </ul>
</div>

3
  • Немного не то, расстояния не одинаковые. Тут, скорее всего ячейки одинакового размера
    – vantal
    12 мая 2020 в 12:36
  • Для наглядности изменил названия пунктов, чтобы было разное кол-во символов
    – vantal
    12 мая 2020 в 12:38
  • Вот теперь отлично!
    – vantal
    12 мая 2020 в 13:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.