Flexbox test, with order

by lmeurs

HTML

<ul class="parent">
  <li class="menu-item logo center">logo</li>
  <li class="menu-item home">home</li>
  <li class="menu-item">1</li>
  <li class="menu-item">2</li>
  <li class="menu-item">3</li>
  <li class="menu-item right">4</li>
  <li class="menu-item right">5</li>
  <li class="menu-item right">6</li>
  <li class="menu-item right lang">lang</li>
</ul>

CSS

body {
  text-align: center;
}

.parent {
  display: flex;
/*
  justify-content: space-around;
  align-items: center;
*/
}

.menu-item {
  flex: 1;
  background: yellow
  padding: 0;
  margin: 0;
  display: block;
}

.home,
.lang {
  flex: none;
  width: 50px;
  background: red;
}

.logo {
  flex: none;
  width: 100px;
  background: pink;
}

.center {
  order: 1;
}

.right {
  order: 2;
}