flex box
플렉스박스 레이아웃 모듈은 우리가 원하는 순서나 방향에 따라 플렉스 항목들이 나타나게 할 수 있고 실제 마크업된 순서와 상관없이 별개로 동작하기 때문에 접근성에 제약을 받지 않는다는 점입니다. 또한 플렉스 박스 모듈은 정렬을 제어하는 능력을 가지고 있습니다.
div {
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
}
속성
flex-direction
방향, 흐름, 시각적인 순서처리이며, 항목들이 어느 쪽으로 배열이 되어야 하는지 제어하는 속성
- row : 왼쪽에서 오른쪽 나열 (기본값)
- row-reverse : 오른쪽에서 왼쪽 나열
- column : 수직으로 왼쪽에서 아래쪽 나열
- column-reverse : 수직으로 아래쪽에서 위쪽 나열
div {
display: flex;
flex-direction : row;
}
flex-wrap
항목들이 열을 바꾸는 방법을 제어하는 속성
- nowrap : 항목들이 wrap이 되지 않도록 지정 (기본값)
- wrap : 열 바꿈
- wrap-reverse : 열 바꿈이 반대로 나열
- initial : 디폴트 값 속성 설정
- inherit : 부모 요소로 값 상속
div {
display: flex;
flex-wrap: wrap;
}
flex-flow
flex-direction과 flex-wrap 값을 명시하는 단축 속성입니다.
두 개의 매개변수 순서에 상관없이 지정할 수 있으며, 하나를 생략하는 것도 가능
div {
display : flex;
flex-flow : column wprap;
}
요소들의 너비 조정 속성값
하나의 플렉스 항목이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
- flex-grow : 증가형 숫자 지정, 정수값 (기본값 0)
- flex-shrink : 요소의 크기가 부모보다 클 때 사용, 정수값(기본값 1)
- flex-basis : 요소의 초기크기 지정 (기본값 1)
flex-grow
양수 정수값을 수용하고 이 값은 남는 공간 중 얼마를 지정된 플렉스 항목에 분배해야 하는지 그 정도를 제어합니다.
- number : 증가시킬 값
- initial : 기본값
- inherit : 부모요소 값 상속
div .item1 {
flex-grow: 5;
}
flex-shrink
양수 정수값을 수용하고 이 값은 남는 공간 중 얼마를 지정된 플렉스 항목에 분배해야 하는지 그 정도를 제어합니다.
- number : 감소시킬 값
- initial : 기본값
- inherit : 부모요소 값 상속
div .item2 {
flex-shrink: 3;
}
flex-basis
모자라는 공간을 회수할 때 해당 플렉스 항목이 플렉스 컨테이너상의 다른 항목들에 비해 얼마나 줄어들지를 결정합니다.
- number : 플렉스 항목의 기본값을 px,pt 등의 길이 단위 또는 %(퍼센테이지)로 지정할 수 있습니다.
- auto : 기본값으로, 길이는 플렉스 항목(flexible item) 길이와 같습니다.
- initial : 기본값
- inherit : 부모요소 값 상속
div .item3 {
flex-basis: 40px;
}
요소의 배치와 높이조정 속성값
order
항목의 현재 요소의 배치 순서를 지정합니다.
- number : 항목의 순서 지정 (기본값 0)
- initial : 기본값
- inherit : 부모요소 값 상속
div .item3 {
order: 3;
}
justify-content
수평 정렬을 처리하는 속성이며, 수직으로 쓰는 방식을 사용하거나 flex-direction 값이 column 일 경우는 제외된다.
- space-between : 첫번째 항목은 왼쪽 끝, 마지막 항목은 오른쪽 끝 졍렬. 다른 항목은 그 사이 남는 공간 일정한 간격 분배 배열
- space-around : 일정한 간격 분배 배열
- flex-start : 왼쪽으로 정렬 (기본값)
- flex-end : 오른쪽 정렬
- center : 중앙 정렬
- initial : 기본값
- inhertit : 부모요소 값 상속
div {
display: flex;
justify-content: space-around;
}
align-items
항목의 정렬을 각각의 항목들과 연관시켜 제어, 항목 중 가장 높이가 큰 기준으로 낮춰서 높이 조정
- stretch : 모든 항목들이 서로 높이값이 동일 하도록 조정 (기본값)
- flex-start : 항목들을 왼쪽에 위치, 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정
- flex-end : 항목을 아래쪽 배치, 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정
- center : 중앙정렬, 각 항목의 위 아래 잔여 공간을 동일하게 분배
- baseline : 모든 하목을 콘텐츠에 지정된 기준선 중심으로 정렬
- initial : 기본값
- inhertit : 부모요소 값 상속
div {
display: flex;
align-items: center;
}
align-self
각 항목에 적용하고 제어하는 속성 개별적으로 적용
- stretch : 모든 항목들이 서로 높이값이 동일하도록 조정 (기본값)
- flex-start : 항목들을 왼쪽에 위치, 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정
- flex-end : 항목을 아래쪽 배치, 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정
- baseline : 모든 하목을 콘텐츠에 지정된 기준선 중심으로 정렬
- initial : 기본값
- inhertit : 부모요소 값 상속
div .item3 {
align-self: center;
}
align-content
여러 열의 컨테이너들이 정렬하는 것을 제어하는 속성
- stretch : 컨테이너 높이와 동일하도록 항목들도 높이 조정 (기본값)
- center : 열들의 위와 아래로 동일하게 공간 분포, 수직 방향 기준으로 중앙 정렬된 상태
- flex-start : 컨테이너 위쪽 열 정렬, 여유 공간은 이 열들의 아래쪽 표시
- flex-end : 컨테이너 바닥으로 정렬, 여유공간은 열들의 위쪽으로 표시
- space-between : 맨 위쪽으로 첫 번째 줄 배치, 나머지는 바닥에 배치. 그 외의 열들은 그 사이에서 동일한 간격을 두고 정space-around : 남는 공간의 일부가 첫 번째 줄 위와 마지막 줄의 밑에 분포. 첫 번째 줄과 마지막 줄이 컨테이너의 맨 위와 아래쪽 끝으로 정렬하지 않음
div {
align-content: center;
}
div .item {
width: 50px;
height : 50px;
}
