> For the complete documentation index, see [llms.txt](https://petercheng7788.gitbook.io/developer-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://petercheng7788.gitbook.io/developer-note/frontend/css/core/flexbox-and-grid.md).
# Flexbox & Grid
## Flexbox
### Flexbox Container
**Flex Wrap**
* If wrapped, the items can be moved into the next rows
**Align Items**
* Stretch will let the item height filled into container if it is a single row and height is not specified
**Justify Content**
**Align Content**
**Align Content vs Align Items**
* Align items focus on the items of a single row
* Align content focus on layout and distance of multiple rows
### Flex Item
**Flex Grow**
* The ratio of width of item in a single row, but easy to be affected by width / flex-basis , here is an example below
**Width / Flex-basis**
* The minimum width of item
**Flex**
* The `flex` property is a shorthand property for the `flex-grow`, `flex-shrink`, and `flex-basis` properties.
* `flex: 1 1 200px => growth ratio 1, shrink ratio 1, minimum width/ height 200px`
**Align Self**
* It is used override the align item of container
## Grid
### Grid Container
**grid-template-columns**
* To describe the ratio of column
```css
// ratio of columns: 1 : 2 : 1
grid-template-columns: 1fr 2fr 1fr;
// all the ratio of columns are the same
grid-template-columns: auto auto auto;
```
**justify-content**
* Focus on the the postition of layout
**Align content**
* Same as justify-content, but with different axis
**Align items**
* focus on the position of grid item
**Justify item**
### Grid Item
**Grid Column & Grid Row**
* To define where the item will start, and where the item will end.
```css
// start on column 1 , end before column 5
grid-column: 1 / 5;
// start on row 1, end before row 5
grid-row: 1 / 5;
```
* If grid-row and grid-col is overlap, the element will be overrided
**Grid Area**
* It can be used assign a name , used to represent the layout
