Равномерно расположите детей, но выровняйте родителей по правому - PullRequest
Новая
       14

Равномерно расположите детей, но выровняйте родителей по правому

0 голосов
/ 19 февраля 2019

У меня есть следующий код для настройки меню.Идея состоит в том, чтобы пункты меню были равномерно распределены по горизонтали, но не располагать их слишком далеко друг от друга, когда есть дополнительное пространство.Если есть дополнительное пространство, сейчас меню выравнивается по левому краю (зеленый в направлении левой части желтого).

Целью является выравнивание меню по правой стороне.Как этого достичь? 

.wrapper {
  display: flex;
  height: 5em;
}
.left {
  flex: 1;
  display: flex;
}
.middle {
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */
}
ul {
  display: flex;
  max-width: 200px;
}
li {
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;
}
.right {
  flex: 1;
}
<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

По выравнивание пунктов меню справа, у нас может быть margin-left: auto на ul.И, возможно, вы также хотите установить по умолчанию padding из ul на ноль.

См. Демонстрацию ниже: 

.wrapper {
  display: flex;
  height: 5em;
}
.left {
  flex: 1;
  display: flex;
}
.middle {
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */
}
ul {
  display: flex;
  max-width: 200px;
  margin-left: auto; /* ADDED */
  padding: 0; /* ADDED */
}
li {
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;
}
.right {
  flex: 1;
}
<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>
0 голосов
/ 19 февраля 2019

это как ты хочешь? 

.wrapper {
  display: flex;
  height: 5em;
}
.left {
  flex: 1;
  display: flex;
}
.middle {
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */
}
ul {
     display: flex;
    width: 100%;
    padding: 0;
    justify-content: flex-start;
}
li {
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;
}
.right {
  flex: 1;
}
<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>
...