CSS - Flexbox 플렉스 박스

 

Flexbox

 

• CSS3 의 최신 레이아웃 모델.
• Display 속성을 사용함.
• float 를 대체하며 더 효율적으로 사용.
• 가로 세로로 아이템들을 정렬.
• 아이템들의 순서나 비율등을 쉽게 적용.

 

 

flex: 200px;

각 요소에 적어도 200px 너비가 지정되었다는 의미

 

flex-direction

row , row-reverse, column, column-reverse

 

 

 

 

---

flex-wrap

wrap, wrap-reverse (자리가 없으면 내려감)

nowrap

 

 

flex-flow: row wrap;

 

flex-direction, flex-wrap 으로 대체

flex-direction: row;
flex-wrap: wrap;

 

 

align-items

정렬 제어

align-items: flex-start;

align-items: flex-end;

align-items: center;

 

align-items - CSS: Cascading Style Sheets | MDN

 

 

 

justify-content

flex item 무리가 기본 축 상 어디에 놓이는지를 제어

 

justify-content: start;

justify-content: end;

justify-content: left;

justify-content: right;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

justify-content - CSS: Cascading Style Sheets | MDN

 

 

 

order

order:1

 

item의 순서 지정 가능