자세한 설명은 생략하고, 위 방법은 보기엔 단순하지만
3를 제외한
4라는 이름(class)의 다음(next) 요소도 있어야 하기 때문에 실제 사용엔 매우 불편하며 명확하지 않은 방법으로써 많은 경우 아래 방식을 사용합니다.
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; }
예제를 보면 수평이 될 요소들에 직접!
2를 적용하고 그 요소들의 Container(부모 요소)에 미리 설정한
6를 적용합니다.
그러면 Flexible Box(이하 Flex)는 어떻게 작성할 수 있을까요?
아주 간단합니다.
.box-container { display: flex; }
Flex는 수평이 될 요소들의 Container(
7)에
8를 적용합니다.
(세부 속성이 필요하지 않은 경우도 많기 때문에 상당히 쉽고 빠르게 수평 요소를 구성할 수 있습니다.)
Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.
우선 Flex는 2개의 개념으로 나뉩니다.
첫 번째는 Container 두 번째는 Items 입니다.
위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.
주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.
Container에는
9, /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 0, /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 1 등의 속성을 사용할 수 있으며,
Items에는 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 2, /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 3, /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 4 등의 속성을 사용할 수 있습니다.
Flex Container
Flex Container를 위한 속성들은 다음과 같습니다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴봅시다.
9
9 속성으로 Flex Container를 정의합니다.
보통 요소의 표시 방법을 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 9,
0 혹은
1 같이 사용하는 경우가 많죠.
같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(
2,
3)로 정의합니다.값의미기본값flexBlock 특성의 Flex Container를 정의inline-flexInline 특성의 Flex Container를 정의
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 3와
5는 차이는 단순합니다.
8로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
3로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
8
9
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 0
.box-container { display: flex; } 1
flex-flow: 주축 여러줄묶음; .flex-container { flex-flow: row-reverse wrap; } 값의미기본값flex-directionItems의 주 축(main-axis)을 설정.box-container { display: flex; } 2flex-wrapItems의 여러 줄 묶음(줄 바꿈) 설정.box-container { display: flex; } 3.box-container { display: flex; } 4
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 5
.box-container { display: flex; } 6
값의미기본값rowItmes를 수평축(왼쪽에서 오른쪽으로)으로 표시.box-container { display: flex; } 2row-reverseItems를 .box-container { display: flex; } 2의 반대 축으로 표시columnItems를 수직축(위에서 아래로)으로 표시column-reverseItems를 .box-container { display: flex; } 9의 반대 축으로 표시flex-direction: 주축;flex-flow: 주축 여러줄묶음; 0
flex-flow: 주축 여러줄묶음; 1
위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
값 .box-container {
display: flex;
}
2는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 .box-container {
display: flex;
}
9은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
flex-flow: 주축 여러줄묶음; 4
flex-flow: 주축 여러줄묶음; 5
flex-flow: 주축 여러줄묶음; 6
flex-flow: 주축 여러줄묶음; 7
flex-flow: 주축 여러줄묶음; 8와 flex-flow: 주축 여러줄묶음; 9를 사용하는데 이는 방향에 맞는 그 시작점과 끝점을 의미합니다.
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 6
.flex-container { flex-flow: row-reverse wrap; } 1
값의미기본값nowrap모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시).box-container { display: flex; } 3wrapItems를 여러 줄로 묶음wrap-reverseItems를 .flex-container { flex-flow: row-reverse wrap; } 3의 역 방향으로 여러 줄로 묶음flex-wrap: 여러줄묶음;.flex-container {
flex-flow: row-reverse wrap;
}
4나 .flex-container {
flex-flow: row-reverse wrap;
}
5)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 .flex-container {
flex-flow: row-reverse wrap;
}
3을 사용해야 합니다.
.flex-container { flex-flow: row-reverse wrap; } 7
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 1
.flex-container { flex-flow: row-reverse wrap; } 9
값의미기본값flex-startItems를 시작점(flex-start)으로 정렬flex-direction: 주축; 0flex-endItems를 끝점(flex-end)으로 정렬centerItems를 가운데 정렬space-between시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨space-aroundItems를 균등한 여백을 포함하여 정렬.box { float: left; } .clear-element { clear: both; /* or left */ } 0flex-direction: 주축; 1
flex-direction: 주축; 2
교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */
.clearfix::after {
content: "";
clear: both;
display: block;
}
.box {
float: left;
}
6 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.
값의미기본값stretchContainer의 교차 축을 채우기 위해 Items를 늘림flex-direction: 주축; 5flex-startItems를 시작점(flex-start)으로 정렬flex-endItems를 끝점(flex-end)으로 정렬centerItems를 가운데 정렬space-between시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨space-aroundItems를 균등한 여백을 포함하여 정렬.box { float: left; } .clear-element { clear: both; /* or left */ } 1flex-direction: 주축; 4 속성을 사용하세요.
값 flex-direction: 주축; 5는 교차 축에 해당하는 너비(속성 flex-direction: 주축; 7 혹은 .flex-container { flex-flow: row-reverse wrap; } 5)가 값이 flex-direction: 주축; 9(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어납니다.
flex-wrap: 여러줄묶음; 0
flex-wrap: 여러줄묶음; 1
flex-wrap: 여러줄묶음; 2
주의할 점은 Items가 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */
.clearfix::after {
content: "";
clear: both;
display: block;
}
.box {
float: left;
}
6을 통해 여러 줄(2줄 이상)일 경우에는 flex-direction: 주축;
2 속성이 우선합니다.
따라서 flex-wrap: 여러줄묶음;
1를 사용하려면 flex-direction: 주축;
2 속성을 기본값(flex-direction: 주축;
5)으로 설정해야 합니다.
flex-wrap: 여러줄묶음; 9
.box { float: left; } .clear-element { clear: both; /* or left */ } 00
.box { float: left; } .clear-element { clear: both; /* or left */ } 01
속성의미orderFlex Item의 순서를 설정flex.box { float: left; } .clear-element { clear: both; /* or left */ } 02, .box { float: left; } .clear-element { clear: both; /* or left */ } 03, .box { float: left; } .clear-element { clear: both; /* or left */ } 04의 단축 속성flex-growFlex Item의 증가 너비 비율을 설정flex-shrinkFlex Item의 감소 너비 비율을 설정flex-basisFlex Item의 (공간 배분 전) 기본 너비 설정align-self교차 축(cross-axis)에서 Item의 정렬 방법을 설정/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 2
.box { float: left; } .clear-element { clear: both; /* or left */ } 06
.box { float: left; } .clear-element { clear: both; /* or left */ } 3.box { float: left; } .clear-element { clear: both; /* or left */ } 07
.box { float: left; } .clear-element { clear: both; /* or left */ } 08
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 3
.box { float: left; } .clear-element { clear: both; /* or left */ } 10
값의미기본값flex-growItem의 증가 너비 비율을 설정.box { float: left; } .clear-element { clear: both; /* or left */ } 11flex-shrinkItem의 감소 너비 비율을 설정.box { float: left; } .clear-element { clear: both; /* or left */ } 12flex-basisItem의 (공간 배분 전) 기본 너비 설정flex-direction: 주축; 9.box { float: left; } .clear-element { clear: both; /* or left */ } 4.box { float: left; } .clear-element { clear: both; /* or left */ } 5.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
02를 제외한 개별 속성은 생략할 수 있습니다.
만약 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
15로 작성하면 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
16과 같습니다.
그러면 나머지 속성은 생략했으니 기본값이 적용되어 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
17, .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
18가 되겠죠?
즉 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
15 혹은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
20은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
21와 같다고 볼 수 있습니다만 그렇지 않습니다.
.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
04의 기본값은 flex-direction: 주축;
9입니다만 단축 속성인 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */
.clearfix::after {
content: "";
clear: both;
display: block;
}
.box {
float: left;
}
3에서 그 값을 생략할 경우 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
11이 적용됩니다.
다시 정리하면 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
15 혹은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
20은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
28이 된다는 것입니다.
이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의합시다!
.box { float: left; } .clear-element { clear: both; /* or left */ } 02
Item의 증가 너비 비율을 설정합니다.
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
11일 경우 효과가 없습니다.
모든 Items의 총 증가 너비(.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
02)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있습니다.
예를 들어 Item이 3개이고 증가 너비가 각각 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
12, .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
34, .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
12이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.
.box { float: left; } .clear-element { clear: both; /* or left */ } 36
.box { float: left; } .clear-element { clear: both; /* or left */ } 03
Item이 감소하는 너비의 비율을 설정합니다.
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
11일 경우 효과가 없습니다.
감소 너비(.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
03)는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭습니다.
영향을 받는다는 요소의 너비는 flex-direction: 주축;
7, .flex-container {
flex-flow: row-reverse wrap;
}
5, .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
04 등으로 너비가 지정된 경우를 의미합니다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.
.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
44일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
34와 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
12이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
47의 2/3인 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
48 만큼 너비가 감소하고,
두 번째 Item은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
47의 1/3인 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
50 만큼 너비가 감소합니다.
다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
47일 때,
요소 너비가 다른 Item이 2개이고 요소 너비는 각각 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
52과 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
53이고,
지정된 감소 너비가 각각 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
34와 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
12이라면,
.box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
56과 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
57 즉 감소 너비는 4:1 비율이며,
첫 번째 Item은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
47의 4/5인 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
59 만큼 너비가 감소하고,
두 번째 Item은 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
47의 1/5인 .box {
float: left;
}
.clear-element {
clear: both; /* or left */
}
61 만큼 너비가 감소합니다.
.box { float: left; } .clear-element { clear: both; /* or left */ } 62
.box { float: left; } .clear-element { clear: both; /* or left */ } 63
.box { float: left; } .clear-element { clear: both; /* or left */ } 04
Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 flex-direction: 주축;
9일 경우 flex-direction: 주축;
7, .flex-container {
flex-flow: row-reverse wrap;
}
5 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 3 속성에서 설명한 것 같이 단축 속성 내에서 .box { float: left; } .clear-element { clear: both; /* or left */ } 04를 생략하면 값이 .box { float: left; } .clear-element { clear: both; /* or left */ } 11이 되는 것을 주의합시다.
.box { float: left; } .clear-element { clear: both; /* or left */ } 72
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 4
.box { float: left; } .clear-element { clear: both; /* or left */ } 74
flex-wrap: 여러줄묶음;
1는 Container 내 모든 Items의 정렬 방법을 설정합니다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */
.clearfix::after {
content: "";
clear: both;
display: block;
}
.box {
float: left;
}
4를 사용할 수 있습니다.
이 속성은 flex-wrap: 여러줄묶음;
1 속성보다 우선합니다.
.box { float: left; } .clear-element { clear: both; /* or left */ } 80
.box { float: left; } .clear-element { clear: both; /* or left */ } 81