Jak vytvořit horizontálně posouvatelné sekce pomocí Flexboxu

Tento článek je zaměřen na příklad a problém, který budeme řešit, je docela standardní.

vyplněná rolovací sekce: https://codepen.io/ohansemmanuel/full/ybMwpj/
Cesta k učení učením je dlouhá, příkladem krátká a efektivní - Lucius Seneca

Tento článek je zaměřen na příklad a problém, který budeme řešit, je docela standardní.

Jak vytvoříte sekci, která se posouvá vodorovně - s velkou podporou prohlížečů, včetně mobilních?

Flexbox! Jo, to je krátká odpověď.

Pojďme to trochu na tělo.

Základní nastavení kódu

Zvažte označení níže.

Je to v podstatě sekce s několika div prvky jako děti.

Styly kódu

Protože nikdo nemiluje ošklivé vzory, pojďme si udělat velmi základní styl:

Prvních několik řádků, 1 -5 explicitně nastavuje šířku a výšku kořenových prvků na 100%

Čára 8 dává tělu barvu pozadí, čára 9 odstraňuje okraj kolem těla, zatímco linie 10 až 12 zajišťují, že přímý podřízený prvek těla je umístěn přesně ve středu - svisle a vodorovně.

Chcete-li to vidět ve skutečnosti, dejte podřízenému elementu

styling:

Řádek 2 je zcela zřejmý. Řádek 3 zajišťuje, že sekce ve výchozím nastavení zabere 100% šířky kontejneru. Řádek 4 zajišťuje, že výška sekce nikdy neklesne pod 200px

Nyní by všechno mělo vypadat takto:

Dokonale vystředěná sekce .card

Teď vložíme kartu - obsah „divs“ do části karty, aby bylo dobře využito.

Pojďme mít znovu několik velmi jednoduchých stylů.

Za prvé, udělejte z karty flex-kontejner:

.card {display: flex}

Pak styl .card - obsah takto:

Řádek 3 zajišťuje, že šířka každé karty není nikdy menší než 200 pixelů, všechno ostatní je celkem jednoduché.

Zde je výsledek:

Posouvejte sekci s přetečením

Jak jste si možná všimli, celá stránka se posouvá. Je to proto, že existuje více prvků, než kolik se vejdou do části karty.

Řekněme konkrétně prohlížeči, aby posouval pouze část karty.

Chcete-li to provést, přidejte toto:

.karta {
  overflow-x: auto;
}

A máme posuvnou sekci:

posuvná část s posuvníkem

Dobrý!

Skrytí posuvníku

Z důvodů UX můžete chtít skrýt posuvník a mít stále posuvnou část.

Existuje snadná cesta ven - alespoň pro prohlížeče webkitů.

.card :: - webkit-scrollbar {
  displej: žádný;
}

Tím se skryjí posuvníky, což je pravděpodobně krásnější.

kompletní vodorovně posouvaná část

Aplikace

Pro ilustraci jsem zde použil prázdná pole. Pro tuto jednoduchou techniku ​​by však mohlo být mnoho aplikací - technika velmi cenná v mobilních aplikacích, kde nemáte mnoho místa na prohlížení

Zde je několik příkladů:

(i) V horizontální části byste mohli mít spoustu obrázků - vaši verzi instangramu

https://codepen.io/ohansemmanuel/full/NjpmWY/

(ii) Mohli byste mít jen spoustu textů, pokud je to pro vás užitečné.

https://codepen.io/ohansemmanuel/full/RVpOaV/

Upřímně řečeno, možnosti jsou nekonečné - vše k vašim službám.

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