HTML / CSS part 2 (flexbox)

ppl8709·2020년 1월 29일
0

1. FlexBox란?

flexbox는 기존의 방식으로 구현하기 어려운 레이아웃을 우연하게 구현할 수 있도록 CSS3에 추가된 레이아웃 방식

flexbox의 구성

부모요소인 flex container와 자식요소인 flex item으로 구성된다.

flexbox 만드는 방법

container에 display:flex; 속성을 선언하면 block 요소였던 item들은 inline요소로 변하게 된다.

2. Container 설정

item 개별적이 아닌 container 전체에 영향을 준다.
ex) box라는 container와 그의 item인 box-1, box-2, box-3이 있을 때, item인 box-3에 justify-end를 주더라도 영향을 받지 않는다.

justify-content

container안의 item들이 가로축을 기준으로 정렬된다. (flex-start가 기본값)

  • space-between : item들을 양쪽 끝으로 붙이고 나머지 item들은 일정한 간격으로 정렬
  • space-around : item들을 좌우 각각 일정한 간격으로 정렬

align-items

container안의 item들이 세로축을 기준으로 정렬된다. (flex-start가 기본값)

  • stretch : container의 높이만큼 item들을 늘려서 정렬
  • baseline : item 문자열의 baseline을 기준으로 정렬


flex-direction

어떤 방향으로 item들을 나열할지 지정한다. (row가 기본값)
왼쪽부터 row / row-reverse / column / column-reverse


flex-wrap

item들이 container를 넘어설 때 줄바꿈 또는 한 줄로 표현할지를 지정한다.

  • nowrap(기본값) : 줄바꿈하지 않고 한줄에 표시
  • wrap : 다음줄에 줄바꿈하여 표시
  • wrap-reverse : item이 container를 넘어설 경우 역방향으로 줄바꿈하여 표시

flex-flow

flex-direction과 flex-wrap을 flex-flow로 한번에 지정할 수 있다.
첫번째 요소는 flex-direction을 두번째 요소는 flex-wrap의 속성값을 나타낸다.


3. Item 설정

item의 넓이, 순서 등 item의 개별적인 속성을 설정한다.

order

container안에서 item의 순서를 지정한다. 숫자가 작을수록 왼쪽에 위치한다.


align-self

align-self로 지정한 요소에만 속성이 적용된다. 단, align-items가 사용하는 값들을 인자로 받기 때문에 수직방향으로 정렬된다.


flex

flex-grow, flex-shrink, flex-basis의 단축 속성이다. (flex: 0 1 auto가 기본값)


flex-grow

item의 넓이를 배수로 지정한다. (음수 사용안함)


flex-shrink

flex-grow와 반대의 속성이다.
아래와 같은 경우 item-2는 item-1보다 2배 작게 된다.


flex-basis

item의 기본 크기값을 지정한다.


참조 : https://junistory.blogspot.com/2017/06/flexbox-layout.html

profile
블로그 이동 👉🏻 https://sunghae.netlify.app/

0개의 댓글