46 lines
375 B
Markdown
46 lines
375 B
Markdown
|
# Flex
|
||
|
|
|
||
|
|
```css
|
||
|
|
.div-flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## flex tag
|
||
|
|
|
||
|
|
`Flex equivalent`
|
||
|
|
```css
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
flex: 1 1 0%;
|
||
|
|
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-shrink: 1;
|
||
|
|
flex-basis: 0%;
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## Order
|
||
|
|
```css
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
```
|
||
|
|
|
||
|
|
### Example
|
||
|
|
```css
|
||
|
|
Center horizontal
|
||
|
|
<--------x-------->
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
|
||
|
|
Center vertical
|
||
|
|
^
|
||
|
|
|
|
||
|
|
|
|
||
|
|
x
|
||
|
|
|
|
||
|
|
|
|
||
|
|
v
|
||
|
|
align-items: center;
|
||
|
|
```
|