FlexBox

CSS Flexbox - kiedy go używać?

CSS Flexbox jest niezwykle przydatny w wielu sytuacjach podczas projektowania stron internetowych. Oto kilka przykładów, kiedy warto go używać:
1. Układ responsywny: Flexbox ułatwia tworzenie układów, które dostosowują się do różnych rozmiarów ekranów, co jest kluczowe dla responsywnego designu.
2. Centrowanie elementów: Flexbox pozwala na łatwe centrowanie elementów zarówno w pionie, jak i w poziomie, co może być trudne do osiągnięcia za pomocą innych metod CSS.
3. Dynamiczne zmiany układu: Jeśli potrzebujesz, aby elementy zmieniały swoje położenie lub rozmiar w zależności od dostępnej przestrzeni, Flexbox jest idealnym rozwiązaniem.
4. Równe wysokości kolumn: Flexbox umożliwia tworzenie kolumn o równej wysokości, co jest przydatne w układach wielokolumnowych.
5. Proste układy: Dla prostych układów, takich jak nawigacja, galerie zdjęć czy formularze, Flexbox jest łatwy w użyciu i bardzo efektywny.
6. Przykład Flexbox

Choć CSS Flexbox jest bardzo wszechstronny i przydatny, ma również pewne wady, które warto wziąć pod uwagę:
1. Kompatybilność przeglądarek: Starsze przeglądarki mogą nie obsługiwać Flexboxa w pełni, co może prowadzić do problemów z wyświetlaniem na niektórych urządzeniach.
2. Złożone układy: Flexbox jest idealny do prostych i średnio skomplikowanych układów, ale przy bardziej złożonych strukturach może być trudniejszy do zarządzania niż CSS Grid (o którym już niebawem).
3. Wydajność: W niektórych przypadkach, zwłaszcza przy dużej liczbie elementów, Flexbox może wpływać na wydajność strony, choć jest to rzadko spotykane.
4. Nauka i zrozumienie: Dla początkujących programistów Flexbox może być trudniejszy do nauki i zrozumienia w porównaniu do tradycyjnych metod układania elementów.

cw 690

• Utwórz dokument cw690.html oraz cw690.css
• Wszystkie ustawienia stylu przenieś i zapisz w pliku zewnętrznym
• Zaimplementuj kod z przykładu

  kod html

• Dodaj do panelu z zawartością główną pięć bloków (artykułów) w taki sposób, aby układały się jeden pod drugim (wybierz stosowne ustawienie dla właściwości flex.)
  Każdy z bloków (artykułów) powinien zwierać jeden wybrany news ze strony szkoły:
  • Nagłowek trzeciego stopnia zawierający tutuł newsa
  • Treść newsa
  • Mini galerię składającą się z trzech zdjęć
  • Tło w odcieniu jasnego brązu na przemian (#d2c4ad oraz #d4bdab)
  • Dodaj własne formatowanie CSS tak, aby zawartość była czytelna.
• Dodaj do panelu z zawartością dodatkową 3 artykuły z informacjami o Twoich ulubionych potrawach:
  Każdy z artykułów powinien zwierać:
  • Nagłowek trzeciego stopnia zawierający nazwę potrawy
  • Składniki potrawy w postaci listy nieuporządkowanej
  • Mini galerię składającą się z trzech zdjęć
  • Cień dookoła artykułu w kolorze: #80ff80
  • Dodaj własne formatowanie CSS tak, aby zawartość była czytelna.
• Do sekcji Sidebar przenieś menu nawigacyjne i ustaw w taki sposób, aby elementy menu układały się ładnie jeden pod drugim.
• Wprowadź takie zapisy w stylu, aby przy wyświetlaniu strony na małym ekranie (smartfon) sekcja z zawartością dodatkową nie była wyświetlana
• Zmodyfikuj styl tak, aby otrzymać efekt podobny jak na załączonym obrazie. Przykład

 

Pytania i odpowiedzi: