Flex Box dla div

Question

Hej,

Dodałem do mojej strony WWW plik css który resetuje wszystkie ustawienia. 

Moim zalożeniem jest aby strona była stworzona wg. metody flex box. Zauważyłem, że display:flex nie jest dziedziczony. (Przynajmniej takie odniosłem wrażenie). Pytanie moje brzmi:

Czy błędnem czy też złą praktyką jest aby dla selektora 'div' (na całej witrynie - w pliku resetującym) ustawić display na flex? Wówczas każdy stworzony DIV będzie wyświetlany jako flex. Dlaczego pytam. Otóż zawuażyłem, że bardzo wygodnie tworzy się responsywne strony w oparciu o model pudełkowy jednak permanentie muszę ustawiać odpowieni disp. i szukam skrótu.

Pozdrawiam

 

Answer 1

Czy ja wiem czy to taki dobry pomysł? Raczej domyślne display zmienia się tylko wówczas, gdy jest to konieczne. Ja bym tak nie ryzykował - co najwyżej dodał display: flex dla jakiejś klasy, nie dla całego tagu.

Comments

No ok, to załóżmy taką sytuację:

<div id="nav"> 
  <div class="menu-wrapp">MENU</div> 
  <div class="menu"> 
    <ul> 
      <li>HOME</li> 
      <li>ABOUT</li> 
      <li>OFFER</li> 
    </ul> 
  </div> 
</div> 

I teraz chciałbym a by div .menu-wrapp i .menu były wyświetlane jeden pod drugim. Więc używam d:f; w divie->.nav a dalej flex-direction:column;. W kolejnym założeniu elementy z listy nieuporządkowanej też miałyby ukladać się jeden pod drugim. I widzę, że dla rodzica jakim dla li jest ul znów musze ustawić d:f.  Dla prostych stylów jest ok ale przy bardziej zagnieżdżonych robi się mase kodu. Jakbyś to rozwiązał?

---

Stylował klasę - po prostu

---

Nie powiedziałbym, że tak dużo kodu się generuje. De facto tylko jedna dodatkowa linijka na dziecko (ponieważ możemy założyć, że te wszystkie dzieci i tak będziesz stylował).

Ew. możesz ustawić

#nav * { display: flex; }

I taka rada - nie używaj id do stylowania

Answer 2

Raczej to odradzam, ponieważ display: flex; generuje kilka problemów (np. vertical padding procentowy jest po prostu NIE do ustawienia, przeglądarka nie reaguje). Możesz też mieć problemy z zapanowaniem nad stroną.