CSS Flexbox Model은 기존 CSS Box Model을 개선하기 위해 만들어졌습니다. Flexbox 모델은 여전히 상자 모델의 주요 요소(여백, 패딩, 테두리 및 콘텐츠)를 포함하지만 공간을 컨테이너/부모의 자식으로 가장 잘 채울 수 있는 유연성을 제공합니다.
이 튜토리얼은 flexbox 모듈을 좀 더 잘 이해하는 데 도움이 되어 사이트를 더 반응적으로 만들기 시작할 수 있습니다.
다음은 기본 flexbox 모델 데모를 위한 시작 코드입니다. flexbox에 대해 이야기할 때 따라해 보세요!
<!DOCTYPE html>
<head>
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto'
}
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
.child-item:first-child {
background: orange;
}
.child-item.one {
background: purple;
}
.child-item.two {
background: aliceblue;
}
.child-item.three {
background: grey;
}
.child-item.four {
background: pink;
}
.child-item.five {
background: yellowgreen;
}
.child-item.six {
background: red;
}
.child-item.seven {
background: blanchedalmond;
}
.child-item.eight {
background: white;
}
.child-item.nine {
background: lightblue;
}
.child-item.nine {
background: darkred;
}
.child-item:last-child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="child-item">Lisa Simpson</div>
<div class="child-item one">Bart Simpson</div>
<div class="child-item two">Maggie Simpson</div>
<div class="child-item three">Homer Simpson</div>
<div class="child-item four">Marge Simpson</div>
<div class="child-item five">Grampa Simpson</div>
<div class="child-item six">Santa's Little Helper</div>
<div class="child-item seven">Apu Nahasapeemapetilon</div>
<div class="child-item eight">Moe Szyslak</div>
<div class="child-item nine">Ned Flanders</div>
<div class="child-item ten">Snowball II</div>
</div>
<script src="" async defer></script>
</body>
</html> 상위 컨테이너(Flexbox) 속성
디스플레이:플렉스
display 속성에는 화면에 컨테이너를 배치하는 데 사용할 수 있는 여러 값이 있습니다. 이미 block, inline-block, none, hidden, inline을 보았을 수 있지만 지금 우리가 집중할 항목은 flex입니다. .
먼저 보물 상자, 장난감 상자 또는 판지 상자와 같은 큰 컨테이너를 상상한 다음 컨테이너 안에 물건을 넣는 것을 상상해보십시오. 큰 컨테이너는 우리가 상위라고 부르는 것입니다. 또는 플렉스박스 컨테이너 안에 들어가는 더 작은 항목은 하위 항목입니다. 또는 플렉스 아이템
display: flex를 추가할 때 상위 컨테이너에 속성이 할당되고 해당 컨테이너에만 해당 속성이 할당됩니다. 하위는 속성을 상속하지 않습니다(그러나 자신의 어린이들).
이 속성은 이전에 사용할 수 없었던 모든 종류의 다른 속성을 엽니다. flex-direction , justify-content , align-items , align-self , flex-wrap 및 flex-flow .
위의 코드 편집기를 실행합니다. 바로 지금, 부모 내부에 큰 녹색 컨테이너인 부모 컨테이너와 11개의 작은 컨테이너인 자식 컨테이너가 표시되어야 합니다.
기본값이 display: block이기 때문에 자식 컨테이너의 방향은 서로 위에 있습니다. . display: block을 사용할 때 , 컨테이너는 그것이 있는 전체 행을 차지합니다. 여백의 기본값은 상위 컨테이너의 너비로 확장되어 두 하위 컨테이너가 서로 위에 놓이도록 합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
대조적으로, display: flex를 사용하면 float 및 vertical-align과 같은 이전 상자 모델 속성을 사용하지 않고도 상위 컨테이너에서 원하는 방식으로 하위 컨테이너를 쉽게 배치할 수 있습니다.
display: flex를 추가해 보세요. 상위 컨테이너의 CSS가 다음과 같이 보이도록 코드 편집기의 스타일 태그에 있는 CSS:
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;
display: flex 추가 .parent-container로 자식 컨테이너의 방향이 변경됩니다. 를 누르면 이제 자식 컨테이너가 나란히 표시됩니다.
display: flex 사용 display: block 대신 , 기본 여백은 0으로 설정됩니다. 그런 다음 적절하다고 생각하는 대로 조정할 수 있습니다!
플렉스 방향
flex-direction 속성은 컨테이너의 기본 축을 설정합니다. 플렉스 컨테이너의 기본 설정은 행입니다. display: flex로 상위 컨테이너를 설정할 때 , 콘텐츠가 열에 있어야 하는 경우가 아니면 플렉스 방향을 설정할 필요가 없습니다.
기본 방향의 주축은 왼쪽에서 오른쪽이고 교차축은 위에서 아래로 표시됩니다.
flex-direction: column을 추가해 봅시다. .parent-container로 위의 코드 편집기에서 누르면 어떻게 되나요?
flex-direction을 전환하면 축이 뒤집히는 것 같습니다. to column:우리의 주축이었던 것이 교차축이 되고 우리의 교차축이었던 것이 주축이 됩니다. 아래 그림과 같습니다.
결과적으로 이 예제의 자식 컨테이너는 축을 뒤집었습니다! 이제 자식 컨테이너가 다시 한 번 서로의 맨 위에 있습니다.
flex-direction에 대해 기억해야 할 가장 큰 점 주축의 방향이 flex-direction 값과 일치한다는 것입니다. 속성(열은 위에서 아래로, 행은 왼쪽에서 오른쪽으로).
Justify-content는 주축의 간격과 관련이 있고 align-items는 교차 축 주위의 간격과 관련이 있습니다. 이러한 속성에 대해서는 잠시 후에 살펴보겠습니다.
플렉스 방향에는 두 가지 다른 가능성이 있습니다. row-reverse 및 column-reverse . 이러한 속성은 행 및 열과 매우 유사하지만 flex-items 행 반전의 경우 오른쪽에서 왼쪽, 열 반전의 경우 아래에서 위로 역순으로 배치됩니다.
이러한 특정 값의 사용 사례는 웹에서 모바일 또는 태블릿에 이르기까지 페이지에서 다른 레이아웃이나 순서를 가져야 할 때 발생합니다.
플렉스 랩
지금까지 display: flex 부모의 자식 컨테이너에 영향을 미치고 행 또는 열에서 해당 자식 컨테이너의 흐름을 조작하는 방법에 영향을 줍니다. 부모의 크기에 여유가 없으면 어떻게 합니까? 무슨 일이야? 어떻게 고칠 수 있습니까?
대답은 flex-wrap이라는 속성 형식으로 제공됩니다. . 기본적으로 flex-wrap nowrap으로 설정됨 . 이는 하위 컨테이너가 상위 컨테이너를 오버플로하여 원치 않는 레이아웃 문제를 일으킬 수 있음을 의미합니다. flex-wrap: wrap을 추가해 봅시다.; .parent-container로 그리고 무슨 일이 일어나는지 보십시오:
여기 컨테이너의 레이아웃이 훨씬 더 멋지게 보입니다. Flex-wrap은 모든 하위 구성 요소를 가져와 상위 컨테이너의 너비에 도달할 때까지 나란히 놓고 다음 행으로 이동하여 더 많은 하위 컨테이너를 추가하여 모든 컨테이너가 표시될 때까지 프로세스를 반복합니다.
Flex-wrap에는 nowrap, wrap 및 wrap-reverse의 세 가지 사용 가능한 속성이 있습니다. wrap-reverse는 위에서 아래가 아니라 아래에서 위로 흐르는 것을 제외하고 랩과 동일합니다.
플렉스 흐름
Flex-flow는 flex-direction의 약어입니다. 및 flex-wrap . 구문은 flex-flow: column wrap입니다. flex-direction이 column이 되고 flex-wrap이 wrap되기를 원하는 경우. flex-flow: row nowrap 기본값입니다.
내용 정당화
justify content 속성은 부모 컨테이너의 주축을 따라 정렬하는 것과 관련이 있습니다. flex-items를 배포하는 데 도움이 됩니다. 필요한 공간을 계산할 필요 없이 주축을 가로질러 justify-content에 가장 일반적으로 사용되는 6가지 속성 값 flex-start (기본값), flex-end , center , space-around , space-between 및 space-evenly .
플렉스 시작:
플렉스 엔드:
중앙:
공백:
사이의 공백:
공백 균등:
항목 정렬
align-items의 가장 큰 차이점 및 justify-content , 자식 컨테이너를 배포하는 축 외에 기본값입니다. 참고로 flex-direction을 사용할 때 justify-content의 기본값 flex-start입니다. . align-items의 경우는 그렇지 않습니다. . 대신 기본값은 stretch입니다.
설명을 위해 페이지 상단의 코드 편집기로 돌아가서 .child-container에서 너비와 높이를 제거해 보겠습니다. . 우리는 이미 display: flex 를 가지고 있습니다. 및 flex-direction 세트. flex-direction: row 사이를 전환해 보겠습니다. 및 flex-direction: column 컨테이너가 제약 조건 없이 어떻게 작동하는지 확인합니다. 예상했던 것과 비교하면 어떻습니까?
align-items 없음 규칙 집합에서 자식 컨테이너는 교차 축에서 부모 컨테이너의 크기로 늘어납니다. 그러나 align-items 상위 컨테이너의 속성을 사용하면 하위 컨테이너의 크기가 콘텐츠 크기와 콘텐츠 크기에 따라 자동으로 조정됩니다.
항목 정렬:늘이기
항목 정렬:가운데
justify-content에 대해 살펴본 다른 모든 속성 여기에서 align-items에도 적용 우리가 어느 축에 있는지 방금 바꾼 것을 제외하고는 같은 것을 의미합니다.
하위 컨테이너(Flex-item) 속성
주문
일반적으로 상위 구성 요소의 컨테이너 순서는 HTML 파일에 배치된 방식을 따릅니다. 그러나 컨테이너의 순서를 제어하려면 – 예를 들어 휴대기기에 있을 때 다른 하위 컨테이너를 먼저 강조 표시하려는 경우 – order 속성을 사용하여 그렇게 할 수 있습니다. 속성은 화면에 표시될 때 자식 컨테이너가 어떤 순서로 들어가야 하는지를 나타내는 숫자 값입니다.
자체 정렬
align-self 기본 정렬 또는 align-items에 의해 설정된 정렬을 허용합니다. 재정의합니다. align-self는 부모 자체가 display: flex인 경우에만 작동한다는 것을 기억하십시오. . align-self 값 flex-start일 수 있음 , flex-end , 기준선 또는 스트레치.
결론
이 자습서에서는 유연한 상자 모델의 기본 사항을 다뤘습니다. 우리는 flexbox가 상위 컨테이너와 하위 컨테이너 간의 관계를 포함한다는 것을 발견했습니다. 부모의 flexbox 속성은 부모의 여유 공간에서 자식 컨테이너의 움직임에 직접적인 영향을 미칩니다.
flex-direction을 사용합니다. , justify-content , align-items 및 flex-wrap 부모에서 자식의 위치를 조작하고 order와 align-self를 사용합니다. 부모에게 적용된 일부 기본값이나 규칙을 재정의하기 위해 자식에게.
연습할 수 있도록 여기에서 코드 편집기를 사용하여 이러한 속성을 사용하십시오. 당신은 flexbox 전문가가 되기 위한 길을 잘 가고 있습니다!