markdown Flexbox设计

Posted 2021-05-06

## FLEXBOX
* Used to easily layout items rather than using BS's column structure
* Items will expand dynamically to fit the page better (more efficient when dealing with unknown sizes)
* Provides "true" centering, even if they overflow the flex container (unlike other CSS methods)!
### Structure
* Uses a parent container called a _flex-container_
* Each child element in the container is called a _flex-item_
* Text inside an element is wrapped in an anonymous flex item
### Axes
* The **main axis** is the axis along which the flex items _follow each other_.
* The **cross axis** is the axis perpendicular to the main axis.
* ```flex-direction``` property **establishes the main axis**.
* ```justify-content``` property defines how flex items are **laid out along the main axis**.
* ```align-items``` property defines the default for how flex items are **laid out along the cross axis**.
* ```align-self``` property defines how a single flex item it aligned on the cross axis, overriding the default 
established by ```align-items```.
### Properties for the parent container
---
* To display the flex features, attach the following to the parent container:
```css
.container {
  display: flex; /* or inline-flex */
}
```
* To control the flex direction of the items within the container:
* Accepts one of the following arguments:
  * `row`: lines items from left to right
  * `row-reverse`: lines items from right to left
  * `column`: stacks items from top to bottom
  * `column-reverse`: stacks items from bottom to top
    
```css
.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}
```
* By default, flex items will try to fit on one line, you can change this to allow the items to wrap
* Accepts one of the following arguments:
    * `nowrap`: all flex items will be on one line
    * `wrap`: flex items will wrap onto multiple lines from top to bottom
    * `wrap-reverse`: flex items will wrap onto multple lines from bottom to top
```css
.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: wrap;
}
```
* You can shorthand the direction and wrap:
    * `flex-flow: direction wrap`
---
### JUSTIFYing the content:
`justify-content: center;`
* Accepts one of the following arguments:
    * `flext-start`
    * `flex-end`
    * `center`
    * `space-between`
    * `space-around`
    * `space-evenly`
---
### ALIGNing items
`align-items: flex-start;`
* Accepts one of the following:
    * `flex-start`
    * `flex-end`
    * `center`
    * `stretch`
    * `baseline`
---
### Aligning content when there is extra space (for when items span multiple lines)
`align-content: center;`
* Accepts one of the following:
    * `flex-start`
    * `flex-end`
    * `center`
    * `stretch`
    * `space-between`
    * `space-around`
---
### Properties for the children
* order: can specify where in the container you can place items
```css
.item {
  order: integer
}
```
* flex-grow: defines how an item can grow if necessary (negative numbers are invalid)
```css
.item {
  flex-grow: number /* default 0 */
}
```
* flex-shrink: defines how an item can shrink
```css
.item {
  flex-shrink: number /* default 1 */
}
```