Сложное гибкое меню в адаптивном дизайне

Question

Я пытаюсь создать меню, реагирующее на меню, которое изменит ориентацию с полем страницы, плавно, если это возможно (было бы идеально, если бы я мог использовать какой-нибудь перевод CSS для его анимации)

Значки должны заполнять поле, но не мешать тексту.

В настоящее время я сделал это с помощью inline-block, margin и @media only screen and (max-width:XXX), но это не совсем гладко. Я хочу, чтобызнаете, есть ли лучший способ сделать это, с помощью flex box?Я не так хорош, как хотелось бы в advenced css, поэтому, если у вас есть подсказка или совет, как это сделать, я был бы признателен.

HTML-код является базовым:

<aside id="menu-right">
        <div class="icon-float icon-white">
            <a href="#top" title="Up">Up</a>
        </div>
        <div class="icon-float">
            <a href="#" title="Home">Home</a>
        </div>
        <div class="icon-float">
            <a href="#" title="Search">Search</a>
        </div>
        <div class="icon-float">
            <a href="#" title="Down">Down</a>
        </div>
</aside>

Мой css довольно уродлив, так что ... кажется, хорошая идея отступить от penuts ...

Спасибо за чтение!

Answer 1

#menu-right {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: flex-end;
  align-content: flex-end;
}

.icon-float {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
}

<aside id="menu-right">
  <div class="icon-float icon-white">
    <a href="#top" title="Up">4</a>
  </div>
  <div class="icon-float">
    <a href="#" title="Home">3 </a>
  </div>
  <div class="icon-float">
    <a href="#" title="Search">2 </a>
  </div>
  <div class="icon-float">
    <a href="#" title="Down">1</a>
  </div>
</aside>