Flexbox je výkonný nový způsob vytváření rozvržení, díky kterému jsou některé z nejnáročnějších aspektů vývoje webu triviální. Podporují ji téměř všechny prohlížeče, které se dnes používají, takže je na čase zjistit, jak se může hodit do vaší typické každodenní práce na frontendu.
To je důvod, proč v tomto rychlém tutoriálu vytvoříme sekci komentářů pomocí flexboxu. Podíváme se na některé ze zajímavějších vlastností, které režim rozvržení flexboxu nabízí, a ukážeme vám, jak jej plně využít.
Co budeme používat
Flexbox se skládá z řady vlastností CSS, z nichž některé dnes použijeme:
display: flex- Tím se aktivuje režim flexibilního rozvržení a přiměje děti prvku dodržovat pravidla flexboxu.justify-content- Tato vlastnost definuje, kam se budou podřízené prvky prvku flexbox zarovnávat (je to podobné jako zarovnání textu, více si přečtěte zde).order- Flexbox nám dává kontrolu nad přesnou polohou, ve které jsou prvky zobrazeny. Tento mocný nástroj používáme v sekci komentářů k přepínání mezi textem a fotografií (více se dozvíte zde).flex-wrap- Řídí obalování prvků v rámci ohebného prvku. Používáme to k vynucení zobrazení avatarů pod textem komentáře na malých obrazovkách (flex-wrap na MDN).
Rozvržení
Chceme, aby naše sekce komentářů splňovala následující požadavky:
- Každý komentář by měl mít avatar, jméno, čas a tělo komentáře.
- Měly by existovat dva typy komentářů – komentáře napsané autorem (vybarvené modře a s avatarem vpravo) a komentáře napsané všemi ostatními.
- Značení HTML pro oba typy komentářů musí být co nejpodobnější, takže je snadné generovat komentáře pomocí kódu.
- Celá věc musí plně reagovat.
To vše lze provést pomocí několika řádků CSS pomocí flexboxu. Pojďme na kód!
HTML
Naše HTML je docela jednoduché. Na konci budeme mít seznam komentářů se základním formulářem pro psaní nových komentářů.
<ul class="comment-section">
<li class="comment user-comment">
<div class="info">
<a href="#">Anie Silverston</a>
<span>4 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />
</a>
<p>Suspendisse gravida sem?</p>
</li>
<li class="comment author-comment">
<div class="info">
<a href="#">Jack Smith</a>
<span>3 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p>
</li>
<!-- More comments -->
<li class="write-new">
<form action="#" method="post">
<textarea placeholder="Write your comment here" name="comment"></textarea>
<div>
<img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
<button type="submit">Submit</button>
</div>
</form>
</li>
</ul>
Pokud se podíváte pozorně na výše uvedený kód, všimnete si, že kromě různých tříd je HTML pro komentáře uživatelů a komentáře autora prakticky stejné. Všechny stylistické a rozvržení rozdíly mezi těmito dvěma budou řešeny výhradně CSS použitým na .user-comment a .author-comment třídy.
CSS
Zde se podíváme na techniky související s flexboxem, které jsme použili při vytváření rozvržení. Pokud chcete prozkoumat šablonu stylů úplně podrobně, stáhněte si celý soubor CSS z tlačítka v horní části článku.
Nejprve dáme všechny komentáře display: flex , což nám umožní používat vlastnosti flexboxu na komentáře a jejich podřízené prvky.
.comment{
display: flex;
} Tyto flexibilní kontejnery zabírají celou šířku naší sekce komentářů a obsahují informace o uživateli, avatar a zprávu. Protože chceme, aby komentáře napsané autorem byly zarovnány doprava, můžeme použít následující vlastnost flex a zarovnat vše ke konci našeho kontejneru.
.comment.author-comment{
justify-content: flex-end;
} Komentáře tak budou vypadat takto:
Nyní máme autorský komentář zarovnaný vpravo, ale také chceme mít prvky uvnitř kontejneru v obráceném pořadí, aby jako první přišla zpráva, potom avatar a informace úplně vpravo. K tomu využijeme order vlastnost.
.comment.author-comment .info{
order: 3;
}
.comment.author-comment .avatar{
order: 2;
}
.comment.author-comment p{
order: 1;
}
Jak vidíte, s pomocí flexboxu už to celé nemůže být jednodušší.
Naše sekce komentářů vypadá přesně tak, jak jsme chtěli. Nezbývá než se postarat o to, aby vypadal dobře i na menších zařízeních. Vzhledem k tomu, že na užší obrazovce nebude tolik dostupného místa, budeme muset provést nějaké úpravy rozvržení, aby byl náš obsah snáze čitelný.
Nastavili jsme dotaz na média, který rozšíří odstavce komentáře a zabere celou šířku kontejneru. To povede k přesunutí avatara a informací o uživateli na další řádek, protože komentáře mají flex-wrap vlastnost nastavena na wrap .
@media (max-width: 800px){
/* Reverse the order of elements in the user comments,
so that the avatar and info appear after the text. */
.comment.user-comment .info{
order: 3;
}
.comment.user-comment .avatar{
order: 2;
}
.comment.user-comment p{
order: 1;
}
/* Make the paragraph in the comments take up the whole width,
forcing the avatar and user info to wrap to the next line*/
.comment p{
width: 100%;
}
/* Align toward the beginning of the container (to the left)
all the elements inside the author comments. */
.comment.author-comment{
justify-content: flex-start;
}
} Rozdíl lze okamžitě zjistit porovnáním tohoto snímku obrazovky s výše uvedeným. Můžete také zkusit otevřít ukázku a změnit velikost prohlížeče, abyste viděli, jak se sekce komentářů přizpůsobí velikosti okna.
Závěr
Toto shrnuje náš tutoriál. Doufáme, že vám to poskytlo praktický příklad, jak používat flexbox při vytváření skutečných dispozic. Pokud vás zajímá, co dalšího je možné, zde je několik skvělých zdrojů, které se vám budou líbit:
- Příručka triků CSS pro flexbox – zde.
- Podrobný článek MDN – zde.
- Web se snadným řešením flexboxů pro klasické problémy CSS – zde.