Классы для Flexbox
- Контейнер
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
- align-self
- flex-basis
- order
- flex-grow
- flex-shrink
Контенер flex-сетки .flex и .b-flex
Класс указывается у контейнера. Все вложенные элементы являются ячейками.
<div class="b-flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.b-flex ↝ display: flex
1
2
3
4
5
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.flex ↝ b-flex + flex-jc-between + flex-ai-stretch
1
2
3
4
5
Свойство flex-direction (контейнер)
<div class="flex flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
Свойство flex-wrap (контейнер)
<div class="flex flex-wrap">
<div class="w50">1</div>
<div class="w50">2</div>
<div class="w50">3</div>
</div>
1
2
3
<div class="flex flex-wrap-reverse">
<div class="w50">1</div>
<div class="w50">2</div>
<div class="w50">3</div>
</div>
1
2
3
<div class="flex flex-nowrap">
<div class="w50">1</div>
<div class="w50">2</div>
<div class="w50">3</div>
</div>
1
2
3
Свойство justify-content (контейнер)
<div class="flex flex-jc-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-jc-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-jc-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-jc-around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
<div class="flex flex-jc-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
Свойство align-items (контейнер)
<div class="flex flex-ai-start">
<div class="pad10">1</div>
<div class="pad20">2</div>
<div class="pad30">3</div>
</div>
1
2
3
<div class="flex flex-ai-end">
<div class="pad10">1</div>
<div class="pad20">2</div>
<div class="pad30">3</div>
</div>
1
2
3
<div class="flex flex-ai-baseline">
<div class="pad10">1</div>
<div class="pad20">2</div>
<div class="pad30">3</div>
</div>
1
2
3
<div class="flex flex-ai-stretch">
<div class="pad10">1</div>
<div class="pad20">2</div>
<div class="pad30">3</div>
</div>
1
2
3
<div class="flex flex-ai-center">
<div class="pad10">1</div>
<div class="pad20">2</div>
<div class="pad30">3</div>
</div>
1
2
3
Свойство align-content (контейнер)
<div class="b-flex flex-wrap flex-ac-start h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap flex-ac-end h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap flex-ac-center h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap flex-ac-between h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap flex-ac-around h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap flex-ac-stretch h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
Свойство align-self (ячейки)
<div class="b-flex flex-wrap h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="flex-as-start">4</div>
<div>5</div>
<div>6</div>
<div class="flex-as-start">7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="flex-as-end">4</div>
<div>5</div>
<div>6</div>
<div class="flex-as-end">7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="flex-as-center">4</div>
<div>5</div>
<div>6</div>
<div class="flex-as-center">7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="flex-as-baseline">4</div>
<div>5</div>
<div>6</div>
<div class="flex-as-baseline">7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
<div class="b-flex flex-wrap h200px">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="flex-as-stretch">4</div>
<div>5</div>
<div>6</div>
<div class="flex-as-stretch">7</div>
<div>8</div>
</div>
1
2
3
4
5
6
7
8
Свойство flex-basis (ячейки)
<div class="flex">
<div class="flex-basis50px">50px</div>
<div class="flex-basis100px">100px</div>
<div class="flex-basis150px">150px</div>
</div>
50px
100px
150px
<div class="flex">
<div class="flex-basis-var" style="--flex-basis: 70px">70px</div>
<div class="flex-basis-var" style="--flex-basis: 90px">90px</div>
<div class="flex-basis-var" style="--flex-basis: 130px">130px</div>
</div>
70px
90px
130px
Свойство order (ячейки)
<div class="flex">
<div class="flex-order2">1</div>
<div class="flex-order3">2</div>
<div class="flex-order1">3</div>
</div>
1
2
3
Свойство flex-grow (ячейки)
<div class="flex">
<div class="flex-grow1">1</div>
<div class="flex-grow2">2</div>
<div class="flex-grow3">3</div>
<div class="flex-grow4">4</div>
<div class="flex-grow5">5</div>
</div>
1
2
3
4
5
Свойство flex-shrink (ячейки)
<div class="flex">
<div class="flex-basis150px flex-shrink1">1</div>
<div class="flex-basis150px flex-shrink2">2</div>
<div class="flex-basis150px flex-shrink3">3</div>
<div class="flex-basis150px flex-shrink4">4</div>
<div class="flex-basis150px flex-shrink5">5</div>
</div>
1
2
3
4
5