


Курс
Верстка адаптивной CSS галереи
В этом курсе мы разберем как сверстать адаптивную css галерею. Также познакомимся с Flexbox.
Знакомство с CSS 3 Flexbox
Этот урок посвящен одному из революционных CSS3 модулей — Flexbox. Забудьте о том, что вы знали о верстке до этого. Посмотрев это видео — вы загляните в будущее.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Знакомство с Flexbox</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div>помиловать</div> <div>нельзя</div> <div>.</div> <div>сослать</div> <div>в</div> <div>Сибирь</div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.container { display: flex; height: 500px; /* flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;*/ justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; align-items: flex-start; align-items: flex-end; align-items: center; } .container div { background: blue; color:#fff; padding:10px; } .container div:first-child { background: green; } .container div:last-child { background: red; } .container div:nth-child(1) { align-self: flex-end; order:4; } .container div:nth-child(2) { order:1; } .container div:nth-child(3) { align-self: flex-start; order:3; } .container div:nth-child(4) { order:2; } .container div:nth-child(5) { order:5; } .container div:nth-child(6) { order:6; } |
Оставь комментарий!
4 thoughts on “Знакомство с CSS 3 Flexbox”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Рекомендуемые курсы
Интересно, спасибо!
Фух, за 19 минут столько знаний получила. Спасибо! Вы круты!
спасибо!
cool lesson from a professional.