Flexbox jak użyć

pytanie zadane 19 lutego 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

Witam. Od 2 dni próbuje ogarnąć flexboxa. W poradnikach i kursach są tylko 'suche' przykłady, jednak nie wiem jak zrobić z tego prostą strukture.

http://codepen.io/czujek22/pen/xgoGoM

Tutaj coś, co chcę osiągnąć. Header na pełną szerokość, pod nim content a na końcu footer. Pytanie tylko w jaki sposób to rozmieścić za pomocą flex i jak zrobić wysokość tych divów bez pomocy height ?

komentarz 19 lutego 2017 przez mitelak Pasjonat (23,330 p.)

Nie rozumiem trochę problemu, bo przecież zrobiłeś na pełną szerokość header. Wysokość natomiast będzie się automatycznie zwiększać jak będziesz dodawać elementy do danych sekcji, a jak chcesz ustawić jakąś minimalną możesz użyć min-height, bo z tego co się orientuje to flexbox nie ma żadnych magicznych funkcji do wysokości (chyba że elementów w środku na przykład stretch w align-items, ale tutaj i tak musisz mięć jakąś wysokość tego elementu rodzica)

komentarz 19 lutego 2017 przez czujek22 Dyskutant (7,670 p.)

Czyli to, co tutaj użyłem jest ok i mogę iść dalej z dalszymi rzeczami ?

4 odpowiedzi

odpowiedź 20 lutego 2017 przez FaloZ Początkujący (460 p.)

Jeżeli chcesz zapoznać się lepiej z flexboxem, to zapraszam tutaj :D

komentarz 20 lutego 2017 przez mbabane Szeryf (79,280 p.)

Ciekawe!

odpowiedź 19 lutego 2017 przez niezalogowany

odpowiedź 19 lutego 2017 przez lapa19904 Stary wyjadacz (11,560 p.)

*{
  margin: 0;
  padding: 0;
}

powinno załatwić sprawę szerokości.

komentarz 19 lutego 2017 przez czujek22 Dyskutant (7,670 p.)

Tak, o tym wiem jednak pominąłem. Ja zrobiłem to po prostu width:100% oraz do itemów podałem wysokości na sztywno. Czy to dobre rozwiązanie z flexem ? Widziałem na filmach, jak robili to poprostu właściwościami flex, gdzie to wszystko się samo wypełniało jednak jestem w tym trochę zagubiony.

komentarz 19 lutego 2017 przez lapa19904 Stary wyjadacz (11,560 p.)

przeglądarki maja domyślnie określony margin dlatego mimo że określiłeś width:100% to background będzie miał biały margin na brzegach podobnie z wysokością.

Co do wysokości to jeśli nie określisz jej na sztywno to będzie rosła wraz z dodawaniem zawartości.

komentarz 19 lutego 2017 przez dewe Gaduła (4,300 p.)

Aby wysokosc rosla wraz z zawartoscia trzeba dodac "overflow: hidden". Poprawcie mnie jesli sie myle

odpowiedź 19 lutego 2017 przez czujek22 Dyskutant (7,670 p.)

Jeszcze mam jedno pytanie. Nie chce zakładać nowego tematu więc napisze w tym/

Zrobiłem przezroczysty background-color poprzez opacity: 0.2;

Tylko, że napisy też stały sie przezroczyste. Jak to naprawić ?