pozycjonowanie elementów na stronie

Question

Witam,

po małej przerwie znów zajrzałem do css, i trochę chyba mnie ominęło. Mianowicie załóżmy, że chce zrobić menu poziome (choć może to być kilka byle jakich pojemnik z jakąkolwiek zawartością), no i chce żeby moje elementy blokowe układały się od lewej do prawej. Normalnie zrobił bym to za pomocą float:left i clear:both, no ale dzisiaj zobaczyłem coś takiego jak display:flex, czy display:grid. A nawet spotkałem się z rozwiązaniem tego problemu za pomocą display:table. No i tu moje pytanie, jakie rozwiązania dzisiaj się stosuje, i w jakich sytuacjach stosuje się display:flex/ grid/ table?

Answer 1

Flex wydaje się najlepszym rozwiązaniem z których podałeś. Grid jest niewspierany w dużej ilości przeglądarek(marzec tego roku ma być niby wszystko OK), a display: table chyba jeszcze nie widziałem.

Warto jednak ogarnąć jak działa tworzenie stron opartych o float - chociażby dla siebie i również ze względu na uwagę, że Boostrap 3 z tego rozwiązania korzysta. Flexa trzeba zrozumieć, a później dopiero zacząć na nim działać. Grid wydaje się być interesującą opcją, ale to nadal wczesna faza i wiele może się zmienić - tak jak to było z flex(box)em.

Answer 2

Jeżeli chodzi o poziome menu, osobiście robię je w ten sposób:

<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Subpage</a></li>
    </ul>
</nav>

ul {
  width: 100%;
  height: 32px;
  list-style: none;
  font-size: 0;
  white-space: nowrap;
}

ul>li {
  display: inline-block;
}

ul>li>a {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 8px 16px;
  font-size: 24px;
}

Coś w ten deseń.