Логотип Berry CSSBerry CSS 4.2

Классы для Flexbox

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
Для inline-flex используйте класс b-inline-flex.

Свойство 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="--basis: 70px">70px</div>
    <div class="flex-basis-var" style="--basis: 90px">90px</div>
    <div class="flex-basis-var" style="--basis: 130px">130px</div>
</div>
70px
90px
130px
css-var

Свойство 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