flex 레이아웃

flex

- 화면 UI를 제작하기 위해 나온 웹 표준 문법

- display: flex

- flex-wrap: wrap;    /* nowrap */

flex 레이아웃 배치시 유의점

1. 부모요소에 flex를 설정함으로서 자식요소의 배치 방식을 결정

2. 중심축(가로), 반대축(세로)

3. 부모요소에 flex설정시 모든 자식 요소는 inline-block화 됨

자식 요소 가로 배치 방법

justify-content:

• flex-start (기본값)
• center
• flex-end
• space-between (요소간 사이에만 균등배치)
• space-around (요소간 양옆 포함 균등배치)
• space-evenly (요소간 중첩 양엽 포함 균등배치)

자식 요소 세로 배치 방법

• flex에서는 줄바꿈을 위한 설정을 직접 처리
• 줄바꿈된 요소와 그렇지 않은 요소의 세로배치 구문이 달라짐
• flex-wrap: wrap; (no-wrap:줄바꿈 처리 안함)

세로 배치 구문 (wrap적용중일때, 줄바꿈될때)

align-content

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

세로 배치 구문 (nowrap 적용시, 줄바꿈 안될때)

align-items

• flex-start
• center
• flex-end

요소의 선택 및 위치 변경

요소 선택 (클래스)

section article.box1 {

     <article class="box1"> 인 경우

}

요소 선택 (위치)

section article.nth-of-type(3) {

      세번째 <article> 인 경우

}

위치 변경 (단, 동일 선상에 있는 모든 요소의 order 값을 지정해야 한다.)

section article.nth-of-type(4){

      order: 1

}