FLEX
기존의 display property
block은 높이와 넓이를 가지고 있고(inline과 반대) element옆에 아무 것도 오지 못하게 한다.inline block은 높이와 넓이를 가지고 있지만 inline처럼 옆에 element를 배치 할 수 있다.
만약 inline block 박스 3개를 배치하는데 왼쪽 중간 오른쪽에 배치하고 싶다면? nth-of-child selector를 이용해서 margin을 줄 순 있겠지만 화면 크기에 따라 디자인이 파괴 될 수 있다.
=> 이 때문에 flex display를 사용하게 된다
Flex의 특징
Flex에서는 바로 위의 parent가 children의 위치를 움질일 수 있다.
->박스들의 위치를 바꾸고 싶으면 flex container안에 있어야 한다.
Flex의 속성들
flex-direction
row,row-reverse,column,column-reverse
를 가질 수있으며 기본값은row이다.- 이 속성값에 따라 main-axis와 cross-axis가 달라진다.
row는 수평축(main-axis)으로 아이템들을 배치하며,column은 수직축(main-axis)으로 배치한다.reverse는 main-axis의 마지막 공간부터 배치한다.
justify-content
- element들을 main-axis상에서 어떻게 정렬할 지 설정한다.
align-items
- element들을 cross-axis상엣 어떻게 정렬할 지 설정한다.
order
- child element에 적용하는 속성으로 , 값이 클수록 나중에 배치하게 된다. 기본값은 0.
align-self
- child element에 적용하는 속성,
align-items와 같은효과를 가진다. 가지는 인자도 같다.
flex-wrap
nowrap:기본 값이며, 무조건 한 줄의 main-axis에 element들을 배치시킨다. 그렇기 때문에 width(혹은 height)를 무시한다.wrap: child element들의 width,height값을 지키면서 여러 줄에 배치시킨다.wrap-reverse: 여러 줄에 배치시킬때, 거꾸로 정렬한다.
flex-flow
- 자주 같이 사용되는
flex-direction과flex-wrap을 한번에 사용한다..flexbox{
flex-flow: column wrap;
}
align-content
- wrap때문에 element들이 여러 줄로 배치되었을 때, 여러 줄 사이의 간격을 지정한다.
align-content랑 align-items가 좀 헷갈린다.
개발