Jak přistupovat k rozvržení CSS v roce 2017 - a dále.

Pomůžu vám pochopit, jak byste měli přistupovat k moderním rozvržením v CSS - je to 2017 a hodně se opravdu změnilo.

Co se naučíte

  1. Jak byly dříve rozloženy rozvržení CSS.
  2. Rozdíly mezi minulými přístupy a moderními standardy
  3. Jak můžete začít s novými standardy dnes (Flexbox a Grid)
  4. Proč byste se měli starat o tyto moderní standardy

Úvod

Kdy přesně si nepamatuji, ale myslím, že v roce 2012 nebo 2013 jsem byl seznámen s vývojem webu. Poměrně mírně jsem se pokusil učit sám.

S CSS mělo mnoho věcí smysl, kromě vytváření inteligentních rozvržení CSS. Bylo tam tolik hacků, které jsem nedokázal pochopit.

1. Jak byly dříve rozloženy rozvržení CSS

Problém:

Pojďme se podívat na docela standardní problém.

Jak vytvoříte dvě sekce stránky - postranní panel a hlavní oblast obsahu se stejnou výškou bez ohledu na jejich velikost obsahu?

Níže uvádíme příklad toho, na co se zaměřujeme:

Boční panel a hlavní oblasti obsahu se stejnou výškou bez ohledu na jejich velikost obsahu

Dříve jste zde mohli vyřešit problém.

(i) Vytvořte div se dvěma prvky, např.


  
  
  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   

V hlavní sekci je samozřejmě více textů.

Dejte sekci stranou nějakou barvu, aby byla odlišitelná.

.stranou {
   barva: #fff;
   barva pozadí: # 8cacea;
}

(ii) Zajistěte, aby se obě sekce objevily vedle sebe

Chcete-li, aby obě sekce zůstaly vedle sebe, postupujte takto:

stranou {
  šířka: 25%;
}
hlavní {
  šířka: 75%;
}
stranou,
hlavní{
  plavat vlevo;
}

Výše uvedený styl rozděluje dostupnou šířku v určitých poměrech a poté vznáší stranou stranou a hlavní oblastí obsahu.

Níže je výsledek:

Dva Obsahy jsou vedle sebe

Pokud si nejste vědomi použití plováků, jedná se o relativně starou techniku, jak posunout prvky do pojmenovaného směru, doleva nebo doprava

Podívejte se na obrázek výše, problém zatím není vyřešen. Výška postranního panelu není stejná jako výška hlavní oblasti obsahu.

Pojďme vyřešit problém konečně.

(iii) Použijte hack zobrazení tabulky

Chcete-li vyřešit problém různých výšek, musíte použít hack stolního displeje - mimochodem tento hack opravdu nenávidím.

Pokud s tímto hackem NEJSOU obeznámeni, je třeba co dělat.

(a) Vytvořte nadřazený kontejner (v tomto případě prvek těla) tabulku.

tělo {
  displej: tabulka;
}

(b) Odstraňte plováky a vytvořte buňky tabulky podřízených prvků

Podřízené prvky v tomto příkladu jsou stranou stranou a hlavním obsahem.

stranou,
hlavní{
  displej: stolní buňka;
}

Jakmile je to hotovo, problém je do značné míry vyřešen - alespoň takhle to bývalo.

Obě obsahové oblasti mají nyní jednotné výšky

2. Rozdíly mezi minulými přístupy a moderními standardy

Nyní, když máte představu o tom, jak byl problém vyřešen dříve, pojďme se podívat, co Flexbox a Grid přinášejí ke stolu.

Flexbox a Grid jsou perfektní řešení rozvržení CSS - moderní standardy. Pokud musíte psát CSS na rozumné úrovni, pak investice do vzdělávání Flexbox a Grid jsou k nezaplacení.

Jak vyřešíte stejný problém s Flexboxem?

Kontext formátování Flexboxu je odstartován vytvořením kontejneru flex.

Zapomeňte na žargon, je to docela snadné.

Rodičovský prvek je zde prvek těla. Obsahuje boční panel a hlavní obsahovou oblast. Takže z něj udělejte flex kontejner:

tělo {
  displej: flex;
}

A dostanete to:

Flexbox v akci

Včetně displeje: flex odstartuje model Flexbox a inicializuje kontext formátování flexboxu.

Nezapomeňte na proporce:

stranou {
  šířka: 25%;
}
hlavní {
  šířka: 75%;
}

Voila! Tento problém je nyní do značné míry vyřešen.

Problém je vyřešen.

Viděli jste, jak snadné to bylo? Jednoduchý a čitelný kód plus ŽÁDNÝ bláznivý hack.

S Flexboxem byste mohli udělat mnohem víc, jako například:

a) Vycentrujte postranní panel a hlavní obsahovou oblast podél svislé osy

html, tělo {
  výška: 100%;
}
tělo {
  Zarovnat položky: střed;
}
SIdebar a hlavní obsahová oblast vycentrovaná přes svislou osu

(b) Umístěte pouze jednu z dětských položek

stranou {
  align-self: center;
}
Boční panel se přesunul do středu vertikální osy

(c) Změňte pořadí zdrojů podřízeného prvku bez ovlivnění dokumentu html

stranou {
  objednávka: 2
}
Postranní panel se nyní jeví, jako by byl umístěn za hlavní oblast obsahu v html dokumentu

U modelu Flexbox jsem jen poškrábal povrch toho, co je možné.

Ať už mluvíme o flexibilitě a snadnosti, model Flexbox přináší jen to!

Jak vyřešíte stejný problém s mřížkou?

Rozvržení tabulky CSS je dokonalým řešením rozvržení. S tím přichází i moc energie.

Pojďme se krátce podívat na to, jak může být stejný problém vyřešen pomocí rozvržení tabulky.

Stejně jako Flexbox, proces začíná stejným způsobem.

Vytvořte z prvku kontejneru mřížkový kontejner.

tělo {
  displej: mřížka;
}

Pokud jste zvědaví, tady jsou všechny CSS:

tělo {
  displej: mřížka;
  barva pozadí: #eeeeee;
}
stranou {
   barva: #fff;
   barva pozadí: # 8cacea;
}

A to je to, co máte:

Počáteční zobrazení

POZNÁMKA

Chcete-li použít rozvržení mřížky, musíte mít kompatibilní prohlížeč, jako je nový Firefox 52 nebo Chrome 57.

Obrázek nahoře nevypadá, že by se něco magického stalo. No, ještě ne.

Co když rozdělíte šířkové proporce, jako jsme to udělali ve výše uvedených případech:

stranou {
  šířka: 25%;
}
hlavní {
  šířka: 75%
}

Dělá to rozdíl?

Rozdělení štěrbin na podřízených prvcích mřížky

Dělá to rozdíl, ale NENÍ to, co jste očekávali. Boční panel a hlavní obsahové oblasti ještě nejsou vedle sebe.

To mě přivádí k vysvětlení důležité části používání rozvržení sítě.

Po nastavení mřížky kontejneru s displejem: mřížka musíte definovat, jak rozvrhujete řádky a sloupce v tomto mřížkovém kontejneru.

Jak to děláš?

tělo {
  sloupce mřížky-šablony: 30% 70%;
}

Jeden den šetří den. Není třeba znovu definovat šířky postranního panelu a hlavních částí obsahu.

grid-template-column definuje proporce, ve kterých jsou sloupce v mřížce položeny

Problém je vyřešen.

Pokud jste se mě zeptali, je to působivé. Žádné špinavé hacky.

S rozvržením mřížky můžete udělat ještě více - mnohem víc.

Za prvé, dejte hlavní části trochu barvy, takže příklady, které přicházejí poté, jsou ještě více vizuální.

hlavní {
  barva pozadí: rgba (39,174,96, 1);
  barva: #fff;
}

Co byste měli mít:

Nyní se podívejme na některé z dobrých věcí, které pro vás má rozvržení tabulky.

(a) Můžete definovat mezery mezi sloupci

tělo {
  mezera ve sloupci mřížky: 15px;
}

Zde je výsledek:

Nyní máte mezi sloupy mezeru - mnohem hezčí!

Není třeba přidávat okraje stranou nebo hlavním

mezera mřížky sloupců definuje mezery (nebo mezery) mezi sloupci v mřížce.

(b) Můžete mít tolik sloupců (nebo řádků), kolik chcete

Výše uvedené příklady použily pouze jeden prvek stranou a hlavní prvek. Přidám další dva.


  
  
  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   
             
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   
             
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean komodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies jn, pellentesque eu, pretium quis, sem. Nulla následuje massa quis enim.   
  

Aniž by došlo k jakýmkoli změnám v CSS, rozvržení tabulky pochopí, co má dělat.

Sloupce stále zachovávají rozložení 30% - 70%

#EDIT: I když to nemá nic společného s mřížkou CSS, měli byste mít na stránce pouze jeden hlavní prvek. Díky, Jason Burnett. Udělal jsem tu slepou kopii n-vložit.

(b) Můžete definovat mezery v řádcích

Stejně jako mezery ve sloupcích, které jsme viděli dříve, můžete také definovat mezery v řádcích.

tělo {
  mezera v mřížce: 15px;
}
Řádkové mezery.

Pro zjednodušení je k dispozici zkratka, pokud jsou mezery v řádcích i sloupcích stejné. Stačí použít mezeru mřížky: 15px namísto nastavení mezery mezi řádky a mřížky a sloupce na 15px

(c) Můžete definovat velikosti řádků

Stejně jako jste definovali relativní velikosti sloupce mřížky, můžete udělat totéž pro řádky.

tělo {
  řádky grid-template: 200px 300px 400px;
}
Různé velikosti řádků

Nyní první, druhý a třetí sloupec mají výšku, 200px, 300px a 400px.

Nemám v úmyslu zde ukázat vše, co je možné s rozvržením tabulky, ale toto je docela dobrý úvod.

Jak vidíte, je zde mnoho velmocí pro rozvržení - vše k dispozici.

3. Jak můžete začít s novými standardy dnes (Flexbox a Grid)

Viděli jste, jak CSS Flexbox a Grid model poskytují lepší a spolehlivější řešení rozvržení. Jak tedy s nimi začít?

Pro jemné představení vám doporučujeme příklady z tohoto článku dobře procvičit. Poté můžete přejít ke studiu ještě hlubších konceptů.

Rozvržení tabulky v současné době nemá velkou podporu prohlížeče, ale nyní můžete experimentovat a používat jej v podporovaných prohlížečích pomocí dotazů na funkce.

V závěrečné části tohoto článku přidávám odkazy na to, jak vám mohu pomoci dosáhnout hlubšího porozumění moderním rozvržením CSS - Flexbox a Grid.

4. Proč byste se měli starat o tyto moderní standardy?

Pokud jste dosud nepřišli na to, proč byste se měli zajímat o Flexbox a Grid, zde je několik problémů, se kterými se můžete setkat s předchozími řešeními rozvržení.

(i.) Pokud v současné době používáte plováky a hackery s čistou opravou, víte, že to může být špinavé

(ii.) Rizikové prvky se překrývají, pokud máte absolutní umístění - protože tato metoda určování polohy vylučuje prvky z toku dokumentů.

(iii.) Pokud jste pro rozložení použili tabulkuplay: tabulka:, máte mnoho nadbytečných značek.

(iv.) Pokud pro řešení rozvržení použijete vložený blok, dojde k problémům s mezerami.

Abych byl upřímný, pokud právě začínáte s vývojem webu a nepovažujete html a css za velmi dobrý, možná se nestaráte o Flexbox a Grid. Vaším řešením může být Bootstrap nebo jiný populární rámec.

Pokud si nepřejete, aby některé z těchto výzev používaly takové populární rámce, nemilovaly vzrušení z toho, že se budete chovat sami, nebo možná budete myslet dopředu, ráda bych získala slušné vzdělání v Flexboxu a Gridu.

Vím, že se vám tento článek líbil, proto jej doporučte a pomozte někomu jinému naučit se něco nového

Chcete se stát profesionálem?

Stáhněte si můj volný CSS Grid cheat sheet, a také získejte dvě kvalitní interaktivní kurzy Flexbox zdarma!

Získejte zdarma list CSS Grid Cheat + dva kvalitní kurzy Flexboxu zdarma!

Získejte je hned