<목차>
1. Flexbox1 - Flexible Box 개념
2. Flexbox2 - 부모(Container)요소의 모든것
3. Flexbox3 - 자식(Items)요소의 모든것
Flex Container
Flex Container의 시작은 display 속성에서 flex값을 선언하면서 시작 합니다.
display 속성에서 무조건 flex 또는 inline-flex를 선언을 해야만 Flex Container의 다른 속성들을 사용할 수 있으며, Flex Container를 위한 속성들은 다음과 같습니다.
- display : Flex Container를 정의 속성
- flex-flow : flex-direction와 flex-wrap의 단축 속성
- flex-direction : Flex Items의 주 축(main-axis)을 설정 속성
- flex-wrap : Flex Items의 여러 줄 묶음(줄 바꿈) 설정 속성
- justify-content : 주 축(main-axis)의 정렬 방법을 설정 속성
- align-content : 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) 속성
- align-items : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) 속성
Flexible Box의 시작은 Display 속성
Display는 기존에도 none, block, inline, inline-block 등 값을 많이 사용되던 속성이다.
Flexible box도 기본 선언은 Display속성을 사용하여 선언 된다.
Flexible box로 선언된 레이아웃은 부모 요소의 display 속성에 flex 또는 inline-flex 값을 지정해 정의한다.
이 때, 부모 요소는 Flexible Container, 각각의 자식(Items) 요소를 Flex 항목이 된다.
Flex 값은 요소를 block Flex Container로 지정하고, inline-flex는 inline Flex Container로 지정한다.
두 값은 요소에 새로운 Flex 서식 맥락을 생성 한다.
Flex 서식 맥락은 block 서식 맥락과 유사하여 플로팅 요소가 Container를 침범하지 않으며, Container의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않는다.
좀더 알기 쉽게 아래의 코드를 참고 하여 다시 설명 하도록 하자.
<Html 코드 예시>
| <div class="container flex1"> <div class="flexbox items1"> <div class="flexbox items2"> <div class="flexbox items3"> </div> <div class="container flex2"> <div class="flexbox items1"> <div class="flexbox items2"> <div class="flexbox items3"> </div> | cs |
<CSS3 예시1>
| .container { display:flex; } | cs |
<CSS3 예시1 결과>
<CSS3 예시2>
| .container { display:inline-flex; } | cs |
<CSS3 예시2 결과>
지금까지 Flexible box의 개념과 기본 선언방식을 이해 했다면 Flexible box의 다양한 Container 속성들을 확인하도록 하겠습니다.
1. flex-flow
이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.
자세한 내용은 다음에 나오는 flex-direction과 flex-wrap설명을 함께 보면 된다.
| .container { display: flex; flex-flow: flex-direction의 값 사용 flex-wrap의 값 사용; /* 두가지의 속성값을 크로스로 사용 */ flex-flow: row-reverse wrap; flex-flow: column-reverse wrap-reverse; } | cs |
2. flex-direction
flex-direction 속성은 flex 컨테이너의 주 축(main axis) 교차 축(cross-axis)방향을 설정 또는 시작점(flex-start)과 끝점(flex-end)을 설정 한다.
flex-direction 속성의 row는 기본값 이다.
주 축(main-axis)과 교차 축(cross-axis)의 개념
row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 되고, 반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.
시작점(flex-start)과 끝점(flex-end)이라는 개념
주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭하며, 방향에 따라 시작점과 끝점이 달라집니다.
flex-direction은 row, row-reverse, column, column-reverse 4가지의 속성 값이 있다.
3. flex-wrap
flex-wrap 속성은 flex 컨테이너의 복수 flex item을 1행으로 또는 복수행으로 배치한다.
flex-wrap 속성은 flex 컨테이너의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.
flex-wrap의 기본값은 nowrap이며, nowrap을 포함하여 wrap, wrap-reverse 총 3개의 값을 사용할 수 있다.
4. justify-content
flex container의 main axis를 기준으로 flex item을 수평 정렬한다.
main start(좌측)를 기준으로 정렬하며, flex-start는 justify-content 속성의 기본값이다.
justify-content의 속성 값으로는 flex-start, flex-end, center, space-between, space-around 이렇게 5가지를 사용 할 수 있다.
5. align-content
align-content는 Container의 교차 축(cross axis)를 기준으로 items을 수직 정렬한다.
모든 items은 items의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. stretch는 align-content의 기본 속성 값이다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다.
그러니 한줄로만 표현 하면 되는 경우라면 align-content 보다 다음에 나올 align-items를 사용하는 것이 좋다.
align-content는 stretch, flex-start, flex-end, center, space-between, space-around 총 6개의 속성 값을 사용 할 수 있다.
6. align-items
align-items는 Container의 교차 축(cross-axis)에서 Items의 정렬 방법을 설정한다.
Items가 한 줄일 경우 많이 사용된다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선한다.
그러므로 align-items를 사용하려면 align-content 속성을 사용하지 않거나 align-content 속성을 기본값(stretch)으로 설정 해야 한다.
align-items은 stretch, flex-start, flex-end, center, baseline 총 5개의 속성 값을 사용 할 수 있으며, 기본값은 stretch이다.
align-items는 한줄일 경우에 사용하라고 정의 하였지만, 예제에서 두줄인 이유는 확연한 차이를 보여 주기 위함이고 Html 마크업을 보면 알겠지만 두개의 부모(Container)로 구성이 되어 있다.
참고로 align-items는 Table 엘레먼트로 만드는 게시판을 대체한 반응형 게시판에 적합하다.
여기까지 Flexible box의 부모인 Container의 속성들을 다 알아 보았다.
다음 완벽가이드3부터 Flexible box의 자식인 Items의 속성들을 알아 보도록 하자.
<목차>
1. Flexbox1 - Flexible Box 개념 [강좌보기] 2. Flexbox2 - 부모(Container)요소의 모든것
3. Flexbox3 - 자식(Items)요소의 모든것 [강좌보기]