markdown Flexbox指南

Posted 2021-05-06

# Flex Item Properties

## Order
Controls the order items are laid out in. Default is source order.
```
.item {
  order: <integer>; /* default is 0 */
}
```

## Flex
Shorthand for flex-grow, flex-shrink, and flex-basis. Default is 0 1 auto.
```
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```

### Flex Grow
Defines the ability for a flex item to grow if necessary. Accepts a unitless value that serves as a proportion.
```
.item {
  flex-grow: <number>; /* default 0 */
}
```

### Flex Shrink
Defines the ability for a flex item to shrink if necessary.
```
.item {
  flex-shrink: <number>; /* default 1 */
}
```

### Flex Basis
Defines the default size before the remaining space is distributed.
```
.item {
  flex-basis: <length> | auto; /* default auto */
}
```

## Align Self
Allows the default alignment to be overwritten.
```
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```

# Flex Container Properties

## Display
Defines a flexbox container, enables flex content for all its direct children.
```
.container {
  display: flex; /* or inline-flex */
}
```

## Flex Flow
Shorthand for flex direction and flex wrap.

`flex-flow: <‘flex-direction’> || <‘flex-wrap’>`

### Flex Direction
Defines the direction in which flex items are placed in the container.
```
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
```

### Flex Wrap
Allows flex items to wrap onto multiple lines. Wrap reverse wraps from bottom to top.
```
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```

## Justify Content
Defines alignment of the flex items along the main axis.
```
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```
* flex-start (default): items are packed toward the start line
* flex-end: items are packed toward to end line
* center: items are centered along the line
* space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
* space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
* space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

## Align Items
Defines alignment along the cross axis.
```
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```
* flex-start: cross-start margin edge of the items is placed on the cross-start line
* flex-end: cross-end margin edge of the items is placed on the cross-end line
* center: items are centered in the cross-axis
* baseline: items are aligned such as their baselines align
* stretch (default): stretch to fill the container (still respect min-width/max-width)

## Align Content
Aligns a flex container's lines within when there is extra space. This has no effect when there's only one line of flex items.
```
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```
* flex-start: lines packed to the start of the container
* flex-end: lines packed to the end of the container
* center: lines packed to the center of the container
* space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
* space-around: lines evenly distributed with equal space around each line
* stretch (default): lines stretch to take up the remaining space