[css] flex속성

📃 flex 속성

플렉스 아이템의 크기를 조절함.
플렉스 아이템의 너비를 조정할 수 있도록 세 가지 값을 이용하여 표시

• flex:flex-grow(늘릴 비율)
• flex-shrink(줄일 비율)
• flex-basis(기본 크기:너비값/0/auto) /
• auto(플렉스 컨테이너의 공간에 따라 늘리거나 줄임) /
• initial(플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄임)

flex:1 1 0; /* 늘이거나 줄이지 않음 */
flex:2 2 0; /* 2배 늘리거나 2배 줄임 */
flex:2; /* flex-grow 값*/
flex:25%;  /* flex-basis 값 */
flex:1 40px; /* flex-grow 값, flex-basis 값  */

🎁 align-content

flex-wrap: wrap; 일 경우 교차축 방향의 아이템 간의 배치 방법을 지정, 아이템 사이의 간격 지정 가능

🎁 flex-wrap

: 플렉스 아이템을 한 줄 또는 여러 줄로 배치하기

• 기본형
  flex-wrap : nowrap(한 줄, 기본값)/wrap(여러 줄)/wrap-reverse(방향 반대)

🎁 flex-flow

: 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정

• 기본형
  flex-flow:플렉스방향 플렉스줄배치
  flex-flow:row;
flex-flow:column wrap;

❓ flex박스 구성요소에 margin넣게되면?

flex가 풀린다.