[css] display:flex flexbox 학습

옛날(?)엔 css 속성을 다룰때 display: block 과 margin, padding 값으로 요소들을 정렬하곤 했다.

물론 이 속성들이 지금은 안쓰이냐? 절대 아니다! 특히 margin, padding은 여전히 UI요소를 적절히 배치하는데 중요한 속성들이다

그러나 display: flex 를 사용하여 훨씬 쉽고 편하게 요소들을 정렬하는 속성이 있다

관련 내용을 게임을 통해 학습할 수 있는 사이트가 있다.

http://flexboxfroggy.com/#ko

다음은 위 사이트의 내용을 정리 한 것.

display: flex; 와 함께 사용할 수 있는 css 속성들

 

justify-content

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between: 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

 

align-items

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬

 

order

• 순서 변경이 필요한데, 전체를 역으로 바꾸는 것으로 충분하지 않을 때 사용
• order의 기본 값은 0이며, 양수나 음수로 변경 가능
• order 속성을 부여한 요소는 0이 제자리, 양수일 경우 오른쪽으로 이동, 음수일 경우 왼쪽으로 이동

 

align-self

• 이 속성은 align-items가 사용하는 값들을 인자로 받음
• 그 값들을 지정한 요소에만 개별 적용 가능

flex-wrap

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow

• flex-direction 과 flex-wrap이 자주 같이 사용되어, 둘을 대신 하는 속성
• 공백문자를 이용하여 두 속성의 값을 인자로 받음

flex-flow: row wrap

 

align-content

• 여러 줄 사이의 간격을 지정하는 속성이기 때문에 한 줄만 있는 경우 효과를 보이지 않음
• 여러 줄 표현이다 보니 flex-wrap과 같이 쓰이는 경우가 많음
• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림