Display: flex

1. Display:flex;

2.

<div class="block">
<p>1</p>
<p>1</p>
</div>
p{
margin: auto;
}
1
1

3.

<div class="block">
<p>1</p>
<p>1</p>
</div>
1
p{
margin: auto;
}
.block{
display:flax;
}
1

4. flex-direction:

row
column
row-reverse
column-reverse

5. justify-content:

6. align-content:

7. align-items:

8. order: <integer>;

order: <integer>;

9. flex-grow: <number>;

flex-grow: <number>;

10. .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{ fllex 1 1 200px; }

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? ||
<'flex-basis'> ]
}
.item{
fllex 1 1 200px;
}

11. .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{ fllex 1 1 200px; }

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? ||
<'flex-basis'> ]
}
.item{
fllex 1 1 200px;
}

12. .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }