Завдання №1
Ці елементи списку є навігацією для
веб-сайту. Вони повинні бути розміщені у ряд, з рівною кількістю простору між
кожним пунктом меню. Готовий приклад повинен виглядати як на малюнку нижче.
<nav>
<ul>
<li><a
href="/">Home</a></li>
<li><a href="/about">About
Us</a></li>
<li><a
href="/products">Our Products</a></li>
<li><a
href="/contact">Contact Us</a></li>
</ul>
</nav>
nav ul {
}
Завдання №2
Усі ці елементи списку мають різний розмір, але потрібно, щоб вони відображались у вигляді трьох однакових за розміром стовпців, незалежно від того, який вміст у кожному елементі:
<ul>
<li>I am small</li>
<li>I have more content than the very small item.</li>
<li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!</li>
</ul>
Завдання №3
Розташувати елементи у рядки, як
на зображенні:
See the Pen task3-flexbox by kravets (@raisa69) on CodePen.
Завдання 4
Розташувати елементи різної висоти у рядок, як на зображенні:
See the Pen flexbox-task5 by kravets (@raisa69) on CodePen.