: CSSμ½λ κ²μμΌλ‘ Flexboxμ μμ±μ μꡬνλλ‘ μ
λ ₯νλ©΄ λ€μ λ¨κ³λ‘ λμ΄κ° μ μλ κ²μ
: Flexboxμ μμ±μ μ€μ΅νλ©° μ΅νκΈ° μ’λ€
βοΈ Flexbox Froggyλ‘ μ΄λ βοΈ
μμ΄ν
λ€μ κ°λ‘ λ°©ν₯μΌλ‘ λ°°μΉν μ μλ λ°©μμΌλ‘ μμμ ν¬κΈ°κ° λΆλ¬Έλͺ
νκ±°λ λμ μΈ κ²½μ°μλ κ° μμλ₯Ό μ λ ¬ν μ μλ ν¨μ¨μ μΈ λ°©λ²μ μ 곡ν¨
Flexμ μμ±μ 컨ν
μ΄λμ μ μ©λλ μμ±, μμ΄ν
μ μ μ©λλ μμ±μΌλ‘ λλ¨
μμ± | μλ―Έ | μΈμ |
---|---|---|
display | Flex Container μ μ | flex |
justify-content | κ°λ‘μ μμμμ μ λ ¬ λ°©μ (μμΉ) | flex-start : μμλ€μ 컨ν
μ΄λμ μΌμͺ½μΌλ‘ μ λ ¬ flex-end : μμλ€μ 컨ν μ΄λμ μ€λ₯Έμͺ½μΌλ‘ μ λ ¬ center : μμλ€μ 컨ν μ΄λμ κ°μ΄λ°λ‘ μ λ ¬ space-between : μμλ€ μ¬μ΄μ λμΌν κ°κ²©μ λ space-around : μμλ€ μ£Όμμ λμΌν κ°κ²©μ λ |
align-items | μΈλ‘μ μμμμ μ λ ¬ λ°©μ (μμΉ) | flex-start : μμλ€μ 컨ν
μ΄λμ κΌλκΈ°λ‘ μ λ ¬ flex-end : μμλ€μ 컨ν μ΄λμ λ°λ₯μΌλ‘ μ λ ¬ center : μμλ€μ 컨ν μ΄λμ μΈλ‘μ μμ κ°μ΄λ°λ‘ μ λ ¬ baseline : μμλ€μ 컨ν μ΄λμ μμ μμΉμ μ λ ¬ stretch : μμλ€μ 컨ν μ΄λμ λ§λλ‘ λλ¦Ό |
flex-direction | 컨ν μ΄λ λ΄ μμλ€μ μ λ ¬ λ°©ν₯ | row : μμλ€μ ν
μ€νΈμ λ°©ν₯κ³Ό λμΌνκ² μ λ ¬ row-reverse : μμλ€μ ν μ€νΈμ λ°λ λ°©ν₯μΌλ‘ μ λ ¬ column : μμλ€μ μμμ μλλ‘ μ λ ¬ column-reverse : μμλ€μ μλμμ μλ‘ μ λ ¬ |
flex-wrap | itemsμ μ€ λ°κΏ μ€μ | nowrap: λͺ¨λ μμλ₯Ό ν μ€μ μ λ ¬ wrap: μμλ€μ μ¬λ¬ μ€μ κ±Έμ³ μ λ ¬ wrap-reverse: μμλ€μ μ¬λ¬ μ€μ κ±Έμ³ 'λ°λλ‘' μ λ ¬ |
flex-flow | flex-directionμ flex-wrapμ λ¨μΆ μμ± | < flex-directionμΈμ > < flex-wrapμΈμ > |
align-content | μ¬λ¬μ€μ κ°κ²© μ§μ (ν μ€μΌ κ²½μ° ν¨κ³ΌX) | flex-start : μ¬λ¬ μ€λ€μ 컨ν
μ΄λμ κΌλκΈ°μ μ λ ¬ flex-end : μ¬λ¬ μ€λ€μ 컨ν μ΄λμ λ°λ₯μ μ λ ¬ center : μ¬λ¬ μ€λ€μ μΈλ‘μ μμ κ°μ΄λ°μ μ λ ¬ space-between : μ¬λ¬ μ€λ€ μ¬μ΄μ λμΌν κ°κ²©μ λ space-around : μ¬λ¬ μ€λ€ μ£Όμμ λμΌν κ°κ²©μ λ stretch : μ¬λ¬ μ€λ€μ 컨ν μ΄λμ λ§λλ‘ λλ¦Ό |
order, align-self, flex λ±
μμ± | μλ―Έ | μΈμ |
---|---|---|
order | flex itemμ μμ κ²°μ | μ μ (μ«μκ° μμμλ‘ μμΌλ‘, ν΄μλ‘ λ€μ μμΉνκ² λ¨ ) |
align-self | ν΄λΉ μμ΄ν
μ μΈλ‘μ μμμμ μ λ ¬ λ°©μ (μμΉ) align-selfλ₯Ό κ°λ³ μμμ μ μ©ν μ μλ λ°©μ | flex-start, flex-end, center, baseline, stretch |
justify-content μμ±
- flex-start: μμλ€μ 컨ν μ΄λμ μΌμͺ½μΌλ‘ μ λ ¬ν©λλ€.
- flex-end: μμλ€μ 컨ν μ΄λμ μ€λ₯Έμͺ½μΌλ‘ μ λ ¬ν©λλ€.
- center: μμλ€μ 컨ν μ΄λμ κ°μ΄λ°λ‘ μ λ ¬ν©λλ€.
- space-between: μμλ€ μ¬μ΄μ λμΌν κ°κ²©μ λ‘λλ€.
- space-around: μμλ€ μ£Όμμ λμΌν κ°κ²©μ λ‘λλ€.
μ λ΅ :
justify-content : flex-end
μ λ΅ :
justify-content : center
μ λ΅ :
justify-content : space-around
μ λ΅ :
justify-content : space-between
align-items μμ±
- flex-start: μμλ€μ 컨ν μ΄λμ κΌλκΈ°λ‘ μ λ ¬ν©λλ€.
- flex-end: μμλ€μ 컨ν μ΄λμ λ°λ₯μΌλ‘ μ λ ¬ν©λλ€.
- center: μμλ€μ 컨ν μ΄λμ μΈλ‘μ μμ κ°μ΄λ°λ‘ μ λ ¬ν©λλ€.
- baseline: μμλ€μ 컨ν μ΄λμ μμ μμΉμ μ λ ¬ν©λλ€.
- stretch: μμλ€μ 컨ν μ΄λμ λ§λλ‘ λ립λλ€.
μ λ΅ :
align-items: flex-end
μ λ΅ :
justify-content : center;
align-items : center;
μ λ΅ :
justify-content : space-around;
align-items : flex-end;
flex-direction μμ±
- row: μμλ€μ ν μ€νΈμ λ°©ν₯κ³Ό λμΌνκ² μ λ ¬ν©λλ€.
- row-reverse: μμλ€μ ν μ€νΈμ λ°λ λ°©ν₯μΌλ‘ μ λ ¬ν©λλ€.
- column: μμλ€μ μμμ μλλ‘ μ λ ¬ν©λλ€.
- column-reverse: μμλ€μ μλμμ μλ‘ μ λ ¬ν©λλ€.
μ λ΅ :
flex-direction : row-reverse
μ λ΅ :
flex-direction : column
μ λ΅ :
flex-direction : row-reverse;
justify-content : flex-end;
μ λ΅ :
flex-direction : column;
justify-content : flex-end;
λ°λ₯μ λ°°μΉμ§λ§ columnλ°©ν₯μΌλ‘ μ λ ¬λμ΄ μμΌλ―λ‘ justify-contentλ₯Ό μ¬μ©ν΄μ λ°λ₯μ μμΉνλλ‘ νλ€.
μ λ΅ :
flex-direction : column-reverse;
justify-content : space-between;
μ λ΅ :
flex-direction : row-reverse;
justify-content : center;
align-items : flex-end;
order μμ±
'μ μ'λ‘ κ° μμμ μ μ©ν μ μμ
λν΄νΈλ 0μ΄λ€
μ λ΅ :
order : 1
μ λ΅ :
order : -1
align-self μμ±
align-itemsμ λμΌν μμ±μ νμ©
ν΄λΉ μμμλ§ μ μ©ν λ νμ©νλ€
μ λ΅ :
align-self : flex-end;
μ λ΅ :
align-self : flex-end;
order : 1
flex-wrap μμ±
- nowrap: λͺ¨λ μμλ€μ ν μ€μ μ λ ¬ν©λλ€.
- wrap: μμλ€μ μ¬λ¬ μ€μ κ±Έμ³ μ λ ¬ν©λλ€.
- wrap-reverse: μμλ€μ μ¬λ¬ μ€μ κ±Έμ³ λ°λλ‘ μ λ ¬ν©λλ€.
μ λ΅ :
flex-wrap : wrap
μ λ΅ :
flex-direction : column;
flex-wrap : wrap
flex-flow μμ±
< flex-directionμΈμ > < flex-wrapμΈμ >
μ λ΅ :
flex-flow : column wrap
align-content μμ±
- flex-start: μ¬λ¬ μ€λ€μ 컨ν μ΄λμ κΌλκΈ°μ μ λ ¬ν©λλ€.
- flex-end: μ¬λ¬ μ€λ€μ 컨ν μ΄λμ λ°λ₯μ μ λ ¬ν©λλ€.
- center: μ¬λ¬ μ€λ€μ μΈλ‘μ μμ κ°μ΄λ°μ μ λ ¬ν©λλ€.
- space-between: μ¬λ¬ μ€λ€ μ¬μ΄μ λμΌν κ°κ²©μ λ‘λλ€.
- space-around: μ¬λ¬ μ€λ€ μ£Όμμ λμΌν κ°κ²©μ λ‘λλ€.
- stretch: μ¬λ¬ μ€λ€μ 컨ν μ΄λμ λ§λλ‘ λ립λλ€.
μ λ΅ :
align-content : flex-start;
μ λ΅ :
align-content : flex-end;
** μ λ΅ :
flex-direction : column-reverse;
align-content : center;
μ λ΅ :
flex-flow : column-reverse wrap-reverse;
justify-content : center;
align-content : space-between;