부모 요소에 flex 적용하기

• flex 의 속성과 속성값
  • display
    1. flex : 자신은 블록 속성을 유지하며 자식 요소에는 flex 환경 설정
    2. inline-flex : 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정
  • flex-direction
    1. row : flex의 기본축을 가로로 지정
    2.  column : flex의 기본축을 세로로 지정
    3. row-reverse : 자식 요소 콘텐츠를 가로 역순으로 정렬
    4. column-reverse : 자식 요소 콘텐츠를 세로 역순으로 정렬 
  •  flex-wrap
    1. nowrap : 자식 요소의 줄 바꿈 X
    2. wrap : 자식 요소의 줄 바꿈 O
  • flex-flow 
    1. row wrap : flex-direction, flex-wrap 속성의 축약문

 

display - 자식 요소의 배치 방법 지정하기

• 부모 요소에 flex 를 지정하여 자식 요소의 레이아웃을 배치

See the Pen display by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

flex-direction - 자식 요소의 정렬 방향 변경하기

• flex-direction 속성을 사용해 요소의 가로세로 정렬

See the Pen flex-direction by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

flex-wrap - 자식 요소에 줄 바꿈 적용하기

See the Pen wrap by 신범식 (@ulqsqjpw-the-solid) on CodePen.