사용하기 불편한 float와 position 등을 대체하기 위해 나온 layout 방식
1. flex-direction
- flex될 자식 요소(items)의 방향을 지정한다.
ex) row, column, row-reverse, column-reverse
2. flex-wrap
- flex items가 flex container를 overflow했을 시에 강제로 한 줄에 표시되도록 할 것인지, 자연스럽게 다음 줄에 보이게 할 것인지에 대해 적용하는 속성
3. flex-flow
- flex-wrap과 flex-direction을 한번에 적용시킬 수 있는 속성
4. justify-content
- flex items에 대한 주축에 대한 정렬 기준을 제공하는 속성
5. align-items
- flex items에 대한 교차축에 대한 정렬 기준을 제공하는 속성. align-content 속성과는 달리 1줄마다 적용된다.
6. align-content
- flex items에 대한 교차축에 대한 정렬 기준을 제공하는 속성. align-items 속성과는 다르게 모든 줄을 한번에 정렬하는 특징이 있다.
1. order
- flex items의 순서를 지정해준다.
2. flex-grow
- flex items 요소가 flex-container 요소 내부에서 할당 가능한 공간의 비율을 표시
3. flex-shrink
- flex items 요소가 flex-container 요소의 크기보다 클 때 얼마나 축소될 지에 대해 적용하는 속성
4. flex-basis
- flex items의 기본 크기를 지정하는 속성
5. flex
- flex-grow, flex-shrink, flex-basis 속성을 한번에 적용하는 속성
twitter에서 사용하는 각종 layout, button 등의 디자인을 css, javascript를 이용해 꾸며놓고 제공하는 framework