2017년 3월 20일 월요일

CSS : Flexbox

요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아보자.

flex box 레이아웃에서 가장 중요한 컴포넌트 두 개는 container 와 items !!

수평 레이아웃
container { display: flex; }

items 는 알아서 수평축으로 정렬

수직 레이아웃 
.container { display: flex; flex-direction: column; }

중심축은 수평축이고 교차축은 수직축, flex-direction: column 을 추가하면 이 두 개의 축을 전환

Justify content and Align items (items 들을 중심축의 중앙에 정렬)
.container { display: flex; flex-direction: row; justify-content: center; }

items 을 다시 수평으로 만들려면, flex-direction 을 column 에서 row 로 변경
justify-content 나 align-items 와 같은 속성들은, 중심축과 교차축에 기준하여 items 을 정렬

align-items 를 이용하여 교차축의 중앙에 정렬
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; }

Items (align-self 속성을 이용하여 첫 번째 item 의 위치를 조정)
.item1 { align-self: flex-end; }

각각의 아이템에 CSS 효과 적용 


참고 :
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

댓글 없음:

댓글 쓰기