Flexbox верстка - пункты меню

Question

Есть меню на 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>

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

БЛОГ НА HUSL

Flexbox верстка - пункты меню

Ответы (1 шт):