CSS Flex 210320 - ChoDragon9/posts GitHub Wiki
κΈ°λ³Έμ μΌλ‘ 컨ν μΈ κΈ°λ°μ κ°λ‘ν κ·Έλ¦¬κ³ λΆλͺ¨ κΈ°μ€μ μΈλ‘νμ κ°μ§λ λ μ΄μμμ μλ―Ένλ€.
- 컨ν μ΄λμ μμ΄ν μΌλ‘ λλ μ§.
- 컨ν μ΄λμ μμ΄ν μ μ μ© ν μ μλ μμ±μ΄ λ€λ₯΄λ€.
- display: flex | inline-flex
- flex-direction: row | column | row-reverse | column-reverse
- flex-wrap: nowrap | wrap | wrap-reverse
- flex-flow: <flex-direction> <flex-wrap>
- justify-content:
flex-start | flex-end | center |
space-between | space-around | space-evenly
- align-items: stretch | flex-start | flex-end | center | baseline
- align-content: // flex-wrap: wrap μ€μ λ μνμΌ λ μ¬μ©.
stretch | flex-start | flex-end | center |
space-between | space-around | space-evenly
// flex λ°μ€μ κΈ°λ³Έ ν¬κΈ° μ€μ
- flex-basis: auto | λ¨μ(0 | 50% | 300px | 10rem) | content
// flex-basis λ³΄λ€ μ»€μ§ μ μλμ§ μ€μ
- flex-grow: 0 | μ«μ
// flex-basis λ³΄λ€ μμμ§ μ μλμ§ μ€μ
- flex-shrink: 1 | μ«μ
- flex: <flex-grow> <flex-shrink> <flex-basis>
// μμ§μΆ μ λ ¬
- align-self: auto | stretch | flex-start | flex-end | center | baseline
- order: μ«μ