• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Flexbox jak użyć

VPS Starter Arubacloud
0 głosów
604 wizyt
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

+3 głosów
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!
+2 głosów
odpowiedź 19 lutego 2017 przez niezalogowany

W tym przypadku flex po prostu nie jest do niczego potrzebny. Elementy będą zwiększać swoją wysokość wraz z pojawiającą się w nich zawartością.

0 głosów
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.
1
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
0 głosów
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ć ?
1
komentarz 19 lutego 2017 przez niezalogowany

background-color: rgba(0,0,0,0.2)

Podobne pytania

0 głosów
0 odpowiedzi 517 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez jakznalezcchlopaka Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 494 wizyt
pytanie zadane 19 września 2017 w HTML i CSS przez andrzej-cs Początkujący (300 p.)
+1 głos
2 odpowiedzi 179 wizyt

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...