211022 TIL Flex-Box (학습 90일차)

오늘은 flex box 속성들에 대해 학습했다.
원래 알고 있었지만, 자세하게 짚고 넘어가보자.

Must Remember

• flex-wrap: wrap;은 item들을 공간이 좁아지면 알아서 줄바꿈이 되도록 하기 위해 사용함.

• flex-direction: column;일 때 align-items: stretch;를 하면 item들의 가로까지 꽉 차게 된다.

• flex-wrap으로 item들이 여러줄로 표시될 때 align-content를 이용해서 교차축 기준으로 배치 방법을 지정할 수 있다.

  • flex-start = 위쪽 배치 end = 끝 center, space-between 양 끝을 기준으로 균등하게, space-around = 양 끝에 여백이 생기고 균등하게

• flex: flex-grow flex-shrink flex-basis;

  • flex-grow = item 너비를 얼마나 늘릴지 숫자로 지정.
  • flex-shrink = item 너비를 얼마나 줄일 지 숫자로 지정 0이면 축소 X
  • flex-basis = item의 기본 크기를 지정 width 속성처럼 너비 값을 지정할 수 있다.
  • flex-auto = item의 항목의 크기가 늘어나거나 줄어듬

• align-self를 각 item에 지정하여 item을 각각 따로 배치할 수 있다.

• flex-flow = direction과 wrap을 한꺼번에 지정
  (flex-flow: row nowrap 기본값, row wrap, column wrap, column nowrap)

• flex:auto; = 내용물의 크기만큼 영역을 차지하도록 한다.