CSS 기초 정리 - Flex box

---

: Code Academy CSS 정리

---

FLEX BOX?

: Flexible Box Layout, it simplifies how to position elements.

• flex container & flex items.
  • flex container is an element of a flex contain flex items. 즉 flex container의 모든 child element가 flex items.
  • flex container의 크기와 위치변화에 따라 flex items도 변함.

---

📌container에 적용하는 속성들

display : flex

• flex container는 block-level이지만, 그 안의 flex items는 가로로 정렬 가능.

display: inline-flex

• 두개 이상의 flex container를 inline으로 만들고 싶을 때 사용.

justify-content

• flex container에 flex나 inline-flex를 적용했을 때, 디폴트로 모두 child elements(=flex items) 왼쪽으로 설정됨. 이를 바꾸는 속성.

  • flex-start ,
  • flex-end,
  • center ,
  • space-around: 동일한 간격을 두고 위치, 그러나 첫번째와 마지막 element 전 후에 공간 존재.
  • space-between : 동일한 간격을 두고 위치, 그러나 양 끝에 공간 존재 하지 않음.

align-itmes

• child elements를 수평이 아니라 수직으로 바꿀수 있는 속성.

• this is for aligning elements within a single row.

  • flex-start : 모든 elements가 parent container의 top에 위치.
  • flex-end : 모든 elements가 parent container의 bottom에 위치.
  • center : 위와 아래의 중간에 위치.
  • baseline : 각 items의 문자 기준선에 맞춰서 정렬
    (the bottom of the content of all items will be aligned with each other.)
  • stretch : (디폴트) parent container에 맞춰 top부터 bottom까지 늘림. 그러나 구체적으로 지정된 height은 늘리지 않음.

flex-wrap

• flex items들의 줄 바꿈.
  • wrap : container안의 items들(가로 열에 안맞을때)을 다음 줄로 내림. 즉 줄바꿈을 함.
  • wrap-reverse :wrap와 같지만 flex-container에 있는 열의 순서를 반대로 바꿈.
  • nowrap :(디폴트) 여러 줄로 묶지 않고, 한 줄에 표시

align-content

• align-items와 같이 위에서 아래로 수직 정렬을 해줌.
• 그러나 , this is for aligning elements within a multiple row.
  • flex-start : 모든 열이 남는 공간 없이 위로 정렬
  • flex-end : 모든 열이 남는 공간 없이 아래로 정렬
  • center : 모든 열이 중간에 정렬
  • space-between : 모든 열들이 위에서 아래로 동일한 간ㄲ으로 정렬 대신, 첫번째와 마지막 전후 사이로 공간이 없음.
  • space-around :모든 열들이 위에서 아래로 동일한 간격으로 정렬 대신, 첫번째와 마지막 전후에도 동일한 공간이 생김.
  • stretch :(디폴트) 만약 최소, 최대 높이가 지정되지 않았다면, 열들은 container를 채우려고 늘어남.

flex-direction

• 이 속성을 사용해 axis(축)를 바꿀 수 있음.
  • row : (디폴트) 가로정렬, 왼쪽에서 오른쪽
  • row-reverse : 가로 반대 정렬, 오른쪽에서 왼쪽
  • column : 세로 정렬 , 위에서 아래
  • column-reverse : 세로 반대 정렬, 아래에서 위로

참고

• main axis(수평)
  • justify-content,flex-wrap,flex-grow,flex-shrink
• cross axis(수직)
  • align-items,align-content

flex-flow

• this is for declarationflex-wrap,flex-direction

<!-- 이거를  --> 
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

<!-- flex-flow 사용 후--> 
.container {
  display: flex;
  flex-flow: column wrap;
}

container 안의 container

• by declaring display:flex,inline-flex for child of flex container

---

📌items에 적용하는 속성들

flex-grow

• container안의 items의 너비 증가 비율을 조절함.
• 숫자가 클수록 item은 높은 container안에서 큰 부분을 차지.
• 디폴트는 0 따라서 container가 커져도 저절로 items가 커지지 않음

flex-shirnk

• container안의 items의 감소하는 너비 비율을 조절함.
• 디폴트가 1 따라서 container가 작아지면 저절로 item도 작아짐.

flex-basis

• item의 기본 너비를 설정함.

flex

• note: display:flex와는 다름.
• 위의 flex-grow,flex-shrink,flex-basis를 순서대로 한번에 쓸수 있게 해줌

.big {
  flex: 2 1 150px;
}