Flexbox homework

No properties

1
2
3
4
5
6
7
8
9
10
11
12
13

Порядок отображения элементов и их ориентация

Свойство flex-wrap

Данное свойство определяет, будет ли контейнер однострочным или многострочным

flex-wrap: wrap

1
2
3
4
5
6
7
8

flex-wrap: nowrap

1
2
3
4
5
6
7
8

flex-wrap: wrap-reverse

1
2
3
4
5
6
7
8

Изменение направления главной оси с помощью flex-direction: column

Данное свойство позволяет менять направление главной оси (той, которая по умолчанию является горизонтальной).

1
2
3
4
5
6
7
8
9
10
11
12
13

Changing direction of main axis with align-content: center

Данное свойство позволяет сместить в центр элементы, для которых было изменено направление главной оси.

1
2
3
4
5
6
7
8
9
10
11
12
13

order property

Чем меньше значение свойства order у элемента, тем левее оно будет находиться.

1
2
3
4
5
6
7
8

Гибкость и масштабируемость элементов

grow property

Элементы заполняют весь контейнер пропорционально значениям flex-growth (чем больше значение, тем больше элемент по размеру)

1
2
3
4
5
6
7
8

shrink property

Элементы заполняют весь контейнер пропорционально значениям flex-shrink (чем больше значение, тем меньше элемент по размеру)

1) в данном случае элементу 3 задан запрет на сужение.

1
2
3
4
5
6
7
8

2) в данном случае элементу 3 задан определенный коэффициент сужения относительно других элементов.

1
2
3
4
5
6
7
8

flex-basis property

Данное свойство позволяет определить начальную длину элемента.

1
2
3
4

flex property

Является шорткатом для описания свойств flex-grow, flex-shrink и flex-basis; По умолчанию: flex: 0 1 auto

1
2
flex: 0 1 250px
4
5
6
7
flex: 1 1 auto
9
10
11
12

Выравнивание

justify-content

Данное свойство позволяет выравнивать элементы по горизонтали, т.е. по главной оси.

1) justify-content: center

1
2
3
4

1) justify-content: space-around

1
2
3
4

Отличие align-content от align-items

Данное отличие состоит в том, что align-items определяет положение элементов на главной оси, когда align-items работает только, когда элементы начинают отображаться на двух и более главных осях и задает их (осей) взаимное положение

align-self and align-items properties

align-items отвечает за выравнивание элементов по поперечной оси строки контейнера. align-self позволяет переопределить выравнивание, определенное align-items.

align-items: center
align-items: center
align-items: center
align-self: flex-start
align-self: flex-end
align-items: center

align-content

Данное свойство задает относительное положение между строками по вертикальной оси также, как justify-content задает относительное положение между элементами в контейнере.

1) align-content: space-around

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2) align-content: space-between

1
2
3
4
5
6
7
8
9
10
11
12