Авторизация

Я в деле!

Новичок

4 урока

(50 минут)

Курс

Верстка адаптивной CSS галереи

В этом курсе мы разберем как сверстать адаптивную css галерею. Также познакомимся с Flexbox.

Знакомство с CSS 3 Flexbox

Марта

2014

Автор урока:

Николай Чернобаев

комментария

лайков

Этот урок посвящен одному из революционных CSS3 модулей — Flexbox. Забудьте о том, что вы знали о верстке до этого. Посмотрев это видео — вы загляните в будущее.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Знакомство с Flexbox</title>

</head>

<body>

<div>помиловать</div>

<div>нельзя</div>

<div>сослать</div>

<div>Сибирь</div>

</div>

</body>

</html>

.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;
}

.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;

}

css3 flexbox

Материалы к уроку:

Делись:

Оставь комментарий!

4 thoughts on “Знакомство с CSS 3 Flexbox”

romaalupka:

10.03.2014 в 16:35

Интересно, спасибо!

Войдите, чтобы ответить
Alona P (Xispanizmo):

14.05.2015 в 00:51

Фух, за 19 минут столько знаний получила. Спасибо! Вы круты!

Войдите, чтобы ответить
rossano:

04.11.2015 в 13:17

спасибо!

Войдите, чтобы ответить
rostyslav:

01.02.2016 в 19:27

cool lesson from a professional.

Войдите, чтобы ответить

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.