Achievement Goals

• 박스 측정 기준(content-box, border-box) 두 가지의 차이를 이해하고 있다.
• 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
  • 얼마나 늘릴 것인가? :flex-grow
  • 방향: flex-direction
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

+ 는 article과 인접한 형제 엘리먼트 p를 선택합니다.
~ 는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다.

---

CSS selector

• 자식 셀렉터 : div > span {}
• 후손 셀렉터 : div p {}

Flexbox

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;		// ****!
  flex-direction: column;
  flex-wrap: wrap;
  flex-flow: row wrap;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
}

• display : flex - 부모 셀렉터에 추가. 자식 셀렉터의 방향과 크기를 결정하는 레이아웃 구성 방법. 자식 셀렉터는 flex : a b c;같은 flex 속성을 이용함.

flex-direction

컨테이너가 플렉스 항목을 쌓을 방향을 정의한다.
박스가 수직으로 분할되는 것이 기본값이다.
column: vertically(from top to bottom)
row: horizontally(from left to right)
row-reverse: horizontally(but from right to left)
column-reverse: vertically(but from bottom to top)

flex 실습 해보자! 개구리 옮기기 🐸

flex-wrap

플렉스 항목을 래핑할지 여부를 지정한다.
wrap: the flex items will wrap if necessary
-> 읏챠피디아 프로젝트에서 검색 후, 영화목록 나열할 때 사용한 방법.
nowrap: default. the flex items will not wrap
-> 구겨져서 한 줄로 있음
wrap-reverse: the flexible items will wrap if necessary, in reverse

justify-content

플렉스 항목을 수평 정렬하는 데 사용한다.
center: at the center of the container
flex-start: default. at the beginning of the container
flex-end: at the end of the container
space-around: with space before, between and after the lines
space-between: with space between the lines

align-items

플렉스 항목을 수직 정렬하는 데 사용한다.
center: in the middle of the container.
flex-start: at the top of the container.
flex-end: at the bottom of the container.
stretch: default. fill the container.
baseline: such as text baselines aligns.

align-content

flex에 대한 초간단 접근법

1. 부모에게 display : flex 를 준다
   ---> 자 이제 자식들은 flex박스 룰을 따르도록 하자.

2. 부모에게 flex-direction : column 을 준다
   ---> 근데 세로방향 기준으로 할거야 column
   (참고로 flex-direction을 설정하지 않으면 기본 값은 row , 가로방향)

3. justify content = flex-direction의 방향에 따라 요리조리 정렬.

4. align-items = flex-direction 방향의 반대쪽을 요리조리 정렬.

flex-dicretion이 column, 세로라면 justify-content 는 세로축을 기준으로 정렬하고, align-items 는 가로축을 기준으로 정렬.

flexbox는 main-axis와 cross axis로 구성되어 있다.
그리고 justify-content는 main-axis를 기준으로 content의 배치해주는 역할을 한다.
align-items는 cross axis를 기준으로 content의 배치해주는 역할을 한다.

flexbox의 정렬 방향은 flex-flow나 flex-direction을 이용해서 변경할 수 있다.