FlexBox의 실제 적용. Flexbox 요소 위치 지정 방법 CSS Flex란 무엇입니까?

07.12.2023 -

안녕, 하브르!

어느 멋진 저녁, 흥미로운 것을 예고하지 않고 우리 채팅은 2012년 봄에 쓴 출판물의 저자로부터 리메이크 기사를 작성하라는 제안을 받았지만 FlexBox와 그 작동 방식에 대한 설명을 함께 사용했습니다. 약간의 의심이 있은 후에도 사양을 더 깊이 이해하려는 관심이 여전히 남아 있었고 나는 행복하게 앉아서 동일한 예를 입력했습니다. 우리가 이 분야에 몰입하면서 많은 뉘앙스가 명확해지기 시작했고 이는 단순히 레이아웃을 재설계하는 것 이상의 의미로 성장했습니다. 일반적으로 이 기사에서는 "CSS 유연한 상자 레이아웃 모듈"이라는 훌륭한 사양에 대해 이야기하고 흥미로운 기능과 적용 예를 보여주고 싶습니다. 해킹에 관심이 있는 모든 분들을 초대합니다.

제가 주목하고 싶은 점은 FlexBox에서 레이아웃을 생성하려면 개발자가 어느 정도 적응해야 한다는 것입니다. 내 자신의 예에서 나는 수년간의 경험이 잔인한 농담을하고 있다고 느꼈습니다. FlexBox에서는 흐름의 요소 정렬에 대해 약간 다른 사고 방식이 필요합니다.

기술적인 부분

예제로 넘어가기 전에 이 사양에 포함된 속성과 작동 방식을 이해하는 것이 좋습니다. 그 중 일부는 처음에는 그다지 명확하지 않고 일부는 현실과 관련이없는 신화에 둘러싸여 있기 때문입니다.

그래서. FlexBox에는 Flex 컨테이너와 해당 하위 요소인 Flex 항목이라는 두 가지 주요 요소 유형이 있습니다. 컨테이너를 초기화하려면 CSS를 통해 요소에 할당하면 됩니다. 디스플레이: 플렉스;또는 디스플레이: 인라인 플렉스;. flex와 inline-flex의 차이점은 display: block과 유사하게 컨테이너 주변 요소와의 상호 작용 원리에만 있습니다. 및 디스플레이: inline-block;, 각각.

유연한 컨테이너 내부에 주축과 수직축 또는 교차축이라는 두 개의 축이 생성됩니다. 대부분의 유연한 요소는 주축을 따라 정렬된 다음 교차축을 따라 정렬됩니다. 기본적으로 주축은 수평이며 왼쪽에서 오른쪽으로 향하고, 교차축은 수직으로 위에서 아래로 향합니다.

CSS 속성을 사용하여 축 방향을 제어할 수 있습니다. 플렉스 방향. 이 속성은 다음과 같은 여러 값을 사용합니다.
열(기본값): Flex 컨테이너의 기본 축은 현재 행 방향 모드의 인라인 축과 동일한 방향을 갖습니다. 주축 방향의 시작(main-start)과 끝(main-end)은 인라인축의 시작(inline-start)과 끝(inline-end)에 해당합니다.
행 역방향: 모든 것이 행과 동일하며 메인 시작과 메인 엔드만 교체됩니다.
열: 행과 동일하지만 이제 주축이 위에서 아래로 향합니다.
열 역방향: 행-역방향과 동일하며 주축만 아래에서 위로 향합니다.
jsfiddle의 예제에서 이것이 어떻게 작동하는지 확인할 수 있습니다.

기본적으로 컨테이너의 모든 플렉스 항목은 한 줄에 배치됩니다. 컨테이너에 맞지 않더라도 경계를 넘어 확장됩니다. 이 동작은 속성을 사용하여 전환됩니다. 플렉스 랩. 이 속성에는 세 가지 상태가 있습니다.
지금 랩(기본값): Flex 항목이 왼쪽에서 오른쪽으로 한 줄로 정렬됩니다.
포장하다: 유연한 요소는 다중 라인 모드로 구축되며 교차축 방향으로 위에서 아래로 전송이 수행됩니다.
랩 리버스: Wrap과 동일하지만 아래에서 위로 래핑됩니다.
예를 살펴보겠습니다.

편의상 추가 속성이 있습니다. 플렉스 플로우, 동시에 지정할 수 있습니다. 플렉스 방향그리고 플렉스 랩. 다음과 같습니다: 플렉스 플로우:

속성을 사용하여 컨테이너의 요소를 정렬할 수 있습니다. 정당화 내용주축을 따라. 이 속성은 최대 5개의 서로 다른 값을 허용합니다.
플렉스 스타트(기본값): Flex 요소가 주축의 원점에 정렬됩니다.
플렉스엔드: 요소가 주축의 끝에 정렬됩니다.
센터: 요소들이 주축의 중심을 기준으로 정렬됩니다.
공백 사이: 요소는 컨테이너에서 사용 가능한 전체 너비를 차지하고, 가장 바깥쪽 요소는 컨테이너 가장자리에 단단히 밀착되며, 여유 공간은 요소 사이에 균등하게 분배됩니다.
우주 주변: 유연한 요소는 요소들 사이에 여유 공간이 고르게 분포되도록 정렬됩니다. 그러나 컨테이너 가장자리와 외부 요소 사이의 공간은 행 중앙에 있는 요소 사이의 공간의 절반이라는 점은 주목할 가치가 있습니다.
물론 이 속성이 어떻게 작동하는지에 대한 예를 클릭할 수 있습니다.

그게 전부는 아닙니다. 교차축을 따라 요소를 정렬하는 기능도 있습니다. 속성을 적용하여 항목 정렬, 또한 5개의 서로 다른 값을 사용하면 흥미로운 동작을 얻을 수 있습니다. 이 속성을 사용하면 행의 요소를 서로 기준으로 정렬할 수 있습니다.
플렉스 스타트: 모든 요소가 줄의 시작 부분으로 푸시됩니다.
플렉스엔드: 요소가 줄의 끝으로 푸시됩니다.
센터: 요소가 행 중앙에 정렬됩니다.
기준선: 요소가 텍스트 기준선에 맞춰 정렬됩니다.
뻗기(기본값): 요소가 전체 줄을 채우기 위해 늘어납니다.

이전 속성과 유사한 또 다른 속성은 다음과 같습니다. 내용 정렬. 이는 플렉스 컨테이너를 기준으로 전체 라인을 정렬하는 역할을 담당하는 유일한 것입니다. 플렉스 항목이 한 줄을 차지하면 아무런 효과가 없습니다. 이 속성은 6가지 다른 가치를 갖습니다.
플렉스 스타트: 모든 선이 교차축의 시작 부분까지 눌려집니다.
플렉스엔드: 모든 선이 교차축의 끝까지 눌려집니다.
센터: 모든 팩 라인이 교차 축의 중심에 정렬됩니다.
공백 사이: 선은 위쪽 가장자리에서 아래쪽으로 분산되어 선 사이에 여유 공간을 남기고 가장 바깥쪽 선은 컨테이너 가장자리에 밀착됩니다.
우주 주변: 용기 전체에 선이 고르게 분포되어 있습니다.
뻗기(기본값): 사용 가능한 모든 공간을 차지하도록 줄이 늘어납니다.
이 예에서 align-items 및 align-content가 어떻게 작동하는지 시험해 볼 수 있습니다. 나는 이 두 가지 속성을 하나의 예에서 구체적으로 제시했는데, 그 이유는 두 속성이 매우 긴밀하게 상호 작용하고 각각 자체 작업을 수행하기 때문입니다. 요소가 한 줄에 배치되거나 여러 줄에 배치되면 어떤 일이 발생하는지 확인하세요.

유연한 컨테이너의 매개변수를 정리했습니다. 남은 것은 유연한 요소의 속성을 파악하는 것뿐입니다.
우리가 처음으로 알아볼 속성은 주문하다. 이 속성을 사용하면 스트림에서 특정 요소의 위치를 변경할 수 있습니다. 기본적으로 모든 플렉스 아이템은 순서: 0;자연스러운 흐름의 순서대로 만들어졌습니다. 예제에서는 서로 다른 순서 값이 요소에 적용되는 경우 요소가 어떻게 교체되는지 확인할 수 있습니다.

주요 속성 중 하나는 플렉스 기반. 이 속성을 사용하면 플렉스 요소의 기본 너비를 지정할 수 있습니다. 기본값은 다음과 같습니다. 자동. 이 속성은 다음과 밀접한 관련이 있습니다. 유연하게 성장하다그리고 플렉스 수축, 이에 대해서는 조금 나중에 이야기하겠습니다. px, %, em 및 기타 단위의 너비 값을 허용합니다. 본질적으로 이는 엄밀히 말하면 flex 요소의 너비가 아니라 일종의 시작점입니다. 요소가 늘어나거나 줄어드는 기준입니다. 자동 모드에서 요소는 내부 콘텐츠를 기준으로 기본 너비를 얻습니다.

유연하게 성장하다여러 리소스에 완전히 잘못된 설명이 있습니다. 컨테이너에 있는 요소의 크기 비율을 설정한다고 합니다. 실제로 이것은 사실이 아닙니다. 이 속성은 컨테이너에 여유 공간이 있을 때 요소의 확대 비율을 지정합니다. 기본적으로 이 속성의 값은 0입니다. 너비가 500px인 Flex 컨테이너가 있고 그 안에 각각 기본 너비가 100px인 두 개의 Flex 항목이 있다고 가정해 보겠습니다. 그러면 컨테이너에 300px의 여유 공간이 더 남게 됩니다. 첫 번째 요소에 flex-grow: 2;를 지정하고 두 번째 요소에 flex-grow: 1;을 지정합니다. 결과적으로 이러한 블록은 컨테이너의 사용 가능한 전체 너비를 차지하며 첫 번째 블록의 너비만 300px이고 두 번째 블록의 너비는 200px입니다. 무슨 일이에요? 컨테이너에서 사용 가능한 300px의 여유 공간이 요소들 사이에 2:1 비율로 분배되었습니다(첫 번째 요소는 +200px, 두 번째 요소는 +100px). 이것이 실제로 작동하는 방식입니다.

여기서 우리는 다른 유사한 속성으로 원활하게 이동합니다. 플렉스 수축. 기본값은 1입니다. 또한 요소의 너비를 반대 방향으로만 변경하는 요소도 설정합니다. 컨테이너에 너비가 있는 경우 더 적은요소의 기본 너비의 합보다 이 속성이 적용됩니다. 예를 들어 컨테이너의 너비는 600px이고 요소의 flex-basis는 300px입니다. 첫 번째 요소에 flex-shrink: 2;를 지정하고 두 번째 요소에 flex-shrink: 1;을 지정합니다. 이제 컨테이너를 300px만큼 축소해 보겠습니다. 따라서 요소 너비의 합은 컨테이너보다 300px 더 큽니다. 이 차이는 2:1 비율로 분포되므로 첫 번째 블록에서 200px을 빼고 두 번째 블록에서 100px을 뺍니다. 요소의 새로운 크기는 첫 번째 요소와 두 번째 요소에 대해 각각 100px과 200px입니다. flex-shrink를 0으로 설정하면 요소가 기본 너비보다 작은 크기로 축소되는 것을 방지합니다.

실제로 이것은 모든 작동 방식에 대한 매우 단순화된 설명이므로 일반 원칙이 명확합니다. 좀 더 자세히, 관심 있는 분이라면 스펙에 알고리즘이 설명되어 있으니 참고해주세요.

세 가지 속성은 모두 다음 표현식을 사용하여 축약된 형식으로 작성할 수 있습니다. 몸을 풀다. 이는 다음과 같습니다:
몸을 풀다: ;
그리고 우리는 두 가지 축약된 버전을 더 작성할 수도 있습니다. 플렉스:자동;그리고 플렉스: 없음;, 즉 플렉스: 1 1 자동;그리고 플렉스: 0 0 자동;각기.

유연한 요소의 마지막 속성은 남아 있습니다. 자기 정렬. 여기에서는 모든 것이 간단합니다. 컨테이너의 항목 정렬과 동일하므로 특정 요소에 대한 정렬을 재정의할 수 있습니다.

그게 다야, 난 지쳤어! 예를 들어보세요!

우리는 기술적인 부분을 정리했는데 꽤 길었지만 들어가야 합니다. 이제 실제 적용으로 넘어갈 수 있습니다.
"정말 유용한 5가지 반응형 레이아웃 템플릿"을 개발하는 동안 우리는 개발자가 자주 접하는 일반적인 상황을 해결해야 했습니다. Flexbox를 사용하면 이러한 솔루션을 구현하는 것이 더 쉽고 유연해집니다.
동일한 4번째 레이아웃을 사용하겠습니다. 왜냐하면... 가장 흥미로운 요소를 가지고 있습니다.

먼저 페이지의 기본 너비를 지정하고 중앙에 정렬한 후 바닥글을 페이지 하단으로 눌러보겠습니다. 항상 그렇듯이 일반적으로.

HTML( 배경: #ccc; 최소 높이: 100%; 글꼴 계열: sans-serif; 디스플레이: -webkit-flex; 디스플레이: flex; 플렉스 방향: 열; ) 본문( 여백: 0; 패딩: 0 15px ; 표시: -webkit-flex; 표시: flex-direction: 자동; : 30px 0 10px; 표시: -webkit-flex; 테두리 상자; : 960px; 최소 너비: 430px; 상자 크기: 테두리 상자; 색상: #eee;

flex-grow: 1을 .main에 지정했기 때문입니다. 사용 가능한 전체 높이까지 늘어나서 바닥글을 아래쪽으로 누릅니다. 이 솔루션의 장점은 바닥글의 높이가 고정되지 않을 수 있다는 것입니다.

이제 헤더에 로고와 메뉴를 배치해 보겠습니다.
.logo( 글꼴 크기: 0; 여백: -10px 10px 10px 0; 디스플레이: 플렉스; 플렉스: 없음; 정렬 항목: 센터; ) .logo:before, .logo:after ( content: ""; 디스플레이: 블록 ; ) .logo:before ( 배경: #222; 너비: 50px; 높이: 50px; 여백: 0 10px 0 20px; 테두리 반경: 50%; ) .logo:after ( 배경: #222; 너비: 90px; 높이 : 30px; ) .nav ( 여백: -5px 0 0 -5px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-wrap: 랩; ) .nav-itm ( 배경: #222; 너비: 130px; 높이: 50px; 글꼴 크기: 1.5rem; 텍스트 장식: 없음; 디스플레이: -webkit-flex: 센터;

헤더에 flex-wrap: Wrap; 내용 정당화: 공백 사이; 로고와 메뉴는 헤더의 서로 다른 면에 흩어져 있으며, 메뉴를 위한 공간이 부족할 경우 로고 아래로 우아하게 이동합니다.

다음으로 큰 게시물이나 배너가 보입니다. 구체적으로 무엇인지 말하기는 어렵지만 그게 요점이 아닙니다. 오른쪽에는 이미지가 있고 왼쪽에는 제목이 있는 텍스트가 있습니다. 저는 개인적으로 레이아웃이 적응형인지 정적인지에 관계없이 모든 요소가 최대한 유연해야 한다는 생각을 고수합니다. 따라서 이 게시물에는 그림이 배치된 사이드바가 있습니다. 엄밀히 말하면 필요한 너비를 정확히 말할 수는 없습니다. 왜냐하면 오늘은 큰 그림이 있고 내일은 작은 그림이 있고 요소를 다시 실행하고 싶지 않기 때문입니다. 매번 처음부터. 즉, 필요한 위치를 차지하려면 사이드바가 필요하고 나머지 공간은 콘텐츠로 이동됩니다. 이렇게 해보자:

상자( 글꼴 크기: 1.25rem; 줄 높이: 1.5; 글꼴 스타일: 기울임꼴; 여백: 0 0 40px -50px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-wrap: 포장; justify-content: center; .box-base ( 여백 왼쪽: 50px; flex: 1 0 430px; ) .box-side ( 여백 왼쪽: 50px; flex: 없음; ) .box-img ( 최대 너비: 100%; 높이: 자동)

제목과 텍스트가 있는 .box-base에서 볼 수 있듯이 기본 너비를 다음과 같이 지정했습니다. 플렉스 기준: 430px;, 또한 다음을 사용하여 블록 축소를 금지합니다. 플렉스 축소: 0;. 이 조작으로 우리는 콘텐츠의 너비가 430px보다 작아질 수 없다고 말했습니다. 그리고 .box에 대해 제가 표시한 사실을 고려하면 플렉스 랩: 랩;사이드바와 콘텐츠가 컨테이너 상자에 맞지 않는 순간, 사이드바는 자동으로 콘텐츠 아래에 놓이게 됩니다. 그리고 이 모든 것은 신청 없이 @미디어! 저는 이것이 정말 멋지다고 생각합니다.

세 개의 열로 구성된 콘텐츠가 남았습니다. 이 문제에는 여러 가지 해결책이 있습니다. 그 중 하나를 다른 레이아웃에 표시하겠습니다.
컨테이너를 만들고 이름을 .content로 지정하고 구성해 보겠습니다.
.content ( margin-bottom: 30px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-wrap: 랩; )

컨테이너에는 .banners, .posts, .comments라는 세 개의 열이 있습니다.
.banners ( flex: 1 1 200px; ) .posts ( 여백: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( 여백: 0 0 30px 30px; flex: 1 1 200px; )

열이 너무 좁아지지 않도록 기본 너비를 200px로 지정했는데 필요에 따라 서로 아래로 이동하면 더 좋을 것 같습니다.

레이아웃에 따라 콘텐츠에 @media 없이는 할 수 없으므로 너비에 대한 열의 동작을 조금 더 조정하겠습니다.<800px и <600px.
@media 화면 및 (최대 너비: 800px) ( .banners ( margin-left: -30px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @media 화면 및 (최대 너비: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

FlexBox에서 레이아웃을 생성할 때 이것이 바로 마법입니다. 제가 좋아하는 또 다른 작업은 5번째 레이아웃입니다. 특히 콘텐츠 적응과 관련이 있습니다.

우리는 데스크톱 해상도에서 게시물이 연속으로 3개의 그리드로 어떻게 구성되는지 확인합니다. 뷰포트 너비가 800px 미만이 되면 그리드는 게시물이 있는 열로 바뀌며 게시물 사진은 게시물 콘텐츠의 왼쪽과 오른쪽에 교대로 정렬됩니다. 그리고 너비가 600px 미만이면 게시물 사진이 완전히 숨겨집니다.
.grid ( 디스플레이: -webkit-flex; 디스플레이: 플렉스; flex-wrap: 랩; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px) * 2/3); 디스플레이: -webkit-flex; 디스플레이: flex-wrap: 랩; ) .grid-img ( 여백: 0 자동 20px; 플렉스: 0 1 80%; ) .grid-cont( 플렉스: 0 1 100%; 그리드-img(플렉스: 0 0 자동; ) .grid-itm:nth-child(even) .grid-img(여백: 0 0 0 30px; 순서: 2; ) .grid-itm:nth-child (홀수) .grid-img (여백: 0 30px 0 0; ) .grid-cont (flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media 화면 및 (최대 너비: 600px) ( .grid-img (표시: 없음; ) )

사실 이는 FlexBox로 구현할 수 있는 것의 작은 부분일 뿐입니다. 이 사양을 사용하면 간단한 코드를 사용하여 매우 복잡한 페이지 레이아웃을 구축할 수 있습니다.

Flexbox는 CSS로 레이아웃을 작성할 때 발생하는 광범위한 문제를 해결하려는 성공적인 시도라고 할 수 있습니다. 하지만 설명으로 넘어가기 전에 현재 사용하는 레이아웃 방법에 어떤 문제가 있는지 알아볼까요?

모든 레이아웃 디자이너는 수직으로 정렬하거나 고무 같은 중간 열이 있는 3열 레이아웃을 만드는 여러 가지 방법을 알고 있습니다. 그러나 이러한 모든 방법은 매우 이상하고 해킹처럼 보이며 모든 경우에 적합하지 않으며 이해하기 어렵고 역사적으로 발전한 특정 마법 조건이 충족되지 않으면 작동하지 않는다는 점을 인정합시다.

이는 html과 css가 진화적으로 발전했기 때문에 일어난 일입니다. 처음에는 웹 페이지가 단일 스레드 텍스트 문서처럼 보였지만 조금 후에 페이지를 블록으로 나누는 작업은 테이블을 사용하여 수행되었으며 그 다음에는 float를 사용하여 레이아웃하는 것이 유행이 되었고 ie6가 공식적으로 종료된 후에는 인라인 블록 기술이 사용되었습니다. 또한 추가되었습니다. 결과적으로 우리는 모든 기존 웹 페이지의 99.9%에 대한 레이아웃을 구축하는 데 사용되는 모든 기술의 폭발적인 혼합을 물려받았습니다.

Flex 컨테이너 내부의 블록을 여러 줄로 구성합니다.

플렉스 랩

위에서 제시한 모든 예제는 단일 행(단일 열) 블록 배열을 고려하여 구축되었습니다. 기본적으로 플렉스 컨테이너는 항상 자체 내부의 블록을 한 줄로 배열합니다. 그러나 사양은 여러 줄 모드도 지원합니다. flex-wrap CSS 속성은 플렉스 컨테이너 내부의 여러 줄 콘텐츠를 담당합니다.

사용 가능한 값 플렉스 랩:

지금 랩 (기본값): 블록은 왼쪽에서 오른쪽으로 한 줄로 배열됩니다(rtl에서는 오른쪽에서 왼쪽으로).
Wrap: 블록이 여러 가로 행으로 배열됩니다(한 행에 맞지 않는 경우). 그들은 왼쪽에서 오른쪽으로 서로 따라갑니다(rtl에서는 오른쪽에서 왼쪽으로).
랩 리버스: 동일 포장하다, 그러나 블록은 역순으로 배열됩니다.

flex-flow는 flex-direction + flex-wrap의 편리한 약어입니다.

본질적으로 flex-flow는 하나의 속성에서 주축과 다중 라인 가로축의 방향을 설명하는 기능을 제공합니다. 기본 플렉스 흐름: 행 nowrap .

플렉스 플로우:<‘flex-direction’> || <‘flex-wrap’>

CSS

/* 즉. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: Wrap; ) /* 이것은 다음과 같습니다... */ .my-flex-block( flex-flow: 컬럼 랩 )

내용 정렬

또한 블록의 결과 행이 수직으로 정렬되는 방식과 플렉스 컨테이너의 전체 공간을 분할하는 방식을 결정하는 align-content 속성도 있습니다.

중요한: align-content는 여러 줄 모드에서만 작동합니다(예: flex-wrap:wrap; 또는 flex-wrap:wrap-reverse;의 경우).

사용 가능한 값 내용 정렬:

flex-start: 블록 행이 플렉스 컨테이너의 시작 부분에 눌러집니다.
flex-end: 블록 행이 플렉스 컨테이너의 끝에 눌려집니다.
중앙: 블록 행이 플렉스 컨테이너의 중앙에 있습니다.
space-between: 블록의 첫 번째 행은 플렉스 컨테이너의 시작 부분에 위치하고, 블록의 마지막 행은 끝에 있으며, 다른 모든 행은 나머지 공간에 고르게 분포됩니다.
space-around: 블록 행은 Flex 컨테이너의 처음부터 끝까지 균등하게 분산되어 사용 가능한 모든 공간을 동일하게 나눕니다.
뻗기 (기본값): 블록 행이 늘어나 사용 가능한 공간을 모두 차지합니다.

CSS 속성 flex-wrap 및 align-content는 하위 항목이 아닌 flex 컨테이너에 직접 적용되어야 합니다.

Flex의 여러 줄 속성 데모

플렉스 컨테이너(플렉스 블록)의 하위 요소에 대한 CSS 규칙

flex-basis – 단일 플렉스 블록의 기본 크기

다른 플렉스 요소를 기반으로 한 변환이 적용되기 전에 플렉스 블록의 초기 주요 축 크기를 설정합니다. 모든 길이 단위(px, em, %, ...) 또는 자동(기본값)으로 지정할 수 있습니다. 자동으로 설정하면 블록 크기(너비, 높이)가 기본으로 사용되며 명시적으로 지정하지 않으면 콘텐츠 크기에 따라 달라질 수 있습니다.

flex-grow – 단일 플렉스 블록의 "탐욕"

필요한 경우 개별 플렉스 블록이 인접 요소보다 얼마나 클 수 있는지 결정합니다. flex-grow는 무차원 값(기본값 0)을 허용합니다.

실시예 1:

플렉스 컨테이너 내부의 모든 플렉스 박스에 flex-grow:1이 있으면 크기가 동일합니다.
그 중 하나에 flex-grow:2가 있으면 다른 모든 것보다 2배 더 커집니다.

실시예 2:

플렉스 컨테이너 내부의 모든 플렉스 박스에 flex-grow:3이 있으면 크기가 동일합니다.
그 중 하나에 flex-grow:12가 있으면 다른 모든 것보다 4배 더 커집니다.

즉, flex-grow의 절대값은 정확한 너비를 결정하지 않습니다. 동일한 레벨의 다른 플렉스 블록과 관련하여 "탐욕"의 정도를 결정합니다.

flex-shrink – 단일 플렉스 블록의 "압축성" 요소

여유 공간이 충분하지 않은 경우 Flex 컨테이너 내부의 인접한 요소에 비해 Flex 블록이 얼마나 축소되는지 결정합니다. 기본값은 1입니다.

flex – flex-grow, flex-shrink 및 flex-basis 속성의 약칭

플렉스: 없음 | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* 즉. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; 플렉스 기준: 30em; ) /* 이것은 다음과 같습니다... */ .my-flex-block( flex : 12 3 30em )

flex-grow, flex-shrink 및 flex-basis 데모

align-self - 가로 축을 따라 단일 플렉스 블록을 정렬합니다.

개별 플렉스 블록에 대한 플렉스 컨테이너의 항목 정렬 속성을 재정의할 수 있습니다.

사용 가능한 align-self 값(align-items와 동일한 5가지 옵션)

flex-start: 플렉스 블록이 가로 축의 시작 부분까지 눌러집니다.
flex-end: 플렉스 블록이 교차축의 끝 부분에 대해 눌려집니다.
중심: 플렉스 블록이 교차축의 중심에 위치합니다.
기준선: 플렉스 블록이 기준선에 맞춰 정렬됩니다.
뻗기 (기본값): 설정된 경우 최소 너비/최대 너비를 고려하여 플렉스 블록이 교차 축을 따라 사용 가능한 모든 공간을 차지하도록 늘어납니다.

order – 플렉스 컨테이너 내부의 단일 플렉스 블록의 순서입니다.

기본적으로 모든 블록은 html에 지정된 순서대로 서로 이어집니다. 그러나 이 순서는 order 속성을 사용하여 변경할 수 있습니다. 정수로 지정되며 기본값은 0입니다.

순서 값은 시퀀스에서 요소의 절대 위치를 지정하지 않습니다. 요소 위치의 가중치를 결정합니다.

HTML

항목 1

항목 2

항목3

항목 4

항목 5

이 경우 블록은 item5, item1, item3, item4, item2 순서로 주축을 따라 차례로 이어집니다.

자체 정렬 및 순서 데모

여백: 자동 수직으로. 꿈은 이루어진다!

margin:auto를 통한 친숙한 가로 정렬이 여기서도 세로 방향으로 작동하기 때문에 Flexbox를 좋아할 수 있습니다!

My-flex-container ( display: flex; height: 300px; /* 아니면 뭐든지 */ ) .my-flex-block ( width: 100px; /* 아니면 뭐든지 */ height: 100px; /* 아니면 뭐든지 * / margin: auto; /* 마법! 블록이 수직 및 수평으로 중앙에 위치합니다 */ )

기억할 사항

필요하지 않은 경우에는 Flexbox를 사용하면 안 됩니다.
많은 경우 영역을 정의하고 콘텐츠 순서를 변경하는 것은 페이지 구조에 따라 달라지는 데 여전히 유용합니다. 생각해 보세요.
Flexbox를 이해하고 기본 사항을 알아보세요. 이렇게 하면 예상한 결과를 훨씬 쉽게 얻을 수 있습니다.
여백을 잊지 마세요. 축 정렬을 설정할 때 고려됩니다. Flexbox의 여백은 일반적인 흐름처럼 "축소"되지 않는다는 점을 기억하는 것도 중요합니다.
플렉스 블록의 부동 소수점 값은 고려되지 않으며 의미가 없습니다. 이는 Flexbox로 전환할 때 우아한 성능 저하를 위해 어떻게든 사용될 수 있습니다.
Flexbox는 웹 구성 요소 및 웹 페이지의 개별 부분 레이아웃에 매우 적합하지만 기본 레이아웃(기사 위치, 머리글, 바닥글, 탐색 모음 등)을 레이아웃할 때 가장 좋은 면을 보여주지 못했습니다. 이는 여전히 논란의 여지가 있는 점이지만 이 기사는 단점을 매우 설득력 있게 보여줍니다. xanthir.com/blog/b4580

마지막으로

물론 Flexbox가 다른 모든 레이아웃 방법을 대체하지는 않지만 가까운 장래에 엄청난 수의 작업을 해결하는 데 가치 있는 틈새 시장을 차지할 것이라고 생각합니다. 그리고 물론, 지금 당장 그와 함께 일해 보도록 노력해야 합니다. 다음 기사 중 하나는 Flex 레이아웃 작업의 구체적인 예를 다룹니다. 뉴스를 구독하세요;)

콘텐츠:

플렉스박스페이지에서 블록을 정렬하는 새로운 방법입니다. 이는 플로트와 달리 요소 배치를 위해 특별히 만들어진 기술입니다. 사용하여 플렉스박스쉽게 요소를 수평 및 수직으로 정렬하고, 요소 표시 방향과 순서를 변경하고, 블록을 상위 요소의 전체 높이까지 늘리거나, 아래쪽 가장자리에 고정할 수 있습니다.

2017년 2월 2일 UPD:나는 Flexbox 치트시트 사양의 라이브 데모와 설명을 포함하는 편리한 치트시트를 만들었습니다.

예제에서는 새로운 구문만 사용합니다. 글을 쓰는 시점에서 가장 정확하게 표시됩니다. 크롬. Firefox에서는 부분적으로 작동하지만 Safari에서는 전혀 작동하지 않습니다.

caniuse.com에 따르면, 플렉스박스 IE 8, 9 및 Opera Mini에서는 지원되지 않으며 다른 브라우저에서는 모든 속성이 지원되지 않거나 접두사가 필요합니다.

이는 기술이 지금 당장 널리 사용될 수는 없지만 이제 더 잘 알아야 할 때라는 것을 의미합니다.

먼저 플렉스 요소가 축을 따라 배열된다는 것을 알아야 합니다. 기본적으로 요소는 수평으로 배열됩니다. 주축- 주축.

또한 사용시 주의할 점은 플렉스박스 float ,clear 및vertical-align은 내부 블록과 텍스트의 열을 지정하는 속성에 대해 작동하지 않습니다.

실험을 위한 테스트 그라운드를 준비합시다:

상위 블록(노란색) 1개와 하위 블록 5개.

디스플레이:플렉스

이제 상위 요소에 display: flex;를 추가합니다. . 내부 div는 내용에 관계없이 동일한 높이의 열로 주축을 따라 정렬됩니다.

디스플레이: 플렉스; 원래의 경우처럼 인라인 또는 블록 기반이 아닌 모든 하위 요소를 유연하게 만듭니다.

상위 블록에 래퍼가 없는 이미지나 텍스트가 포함되어 있으면 익명의 플렉스 항목이 됩니다.

다음에 대한 표시 속성 플렉스박스두 가지 의미를 가질 수 있습니다:

flex - 블록 요소처럼 동작합니다. 블록 너비를 계산할 때 레이아웃이 우선적으로 적용됩니다(블록 너비가 충분하지 않으면 내용이 경계를 넘을 수 있음).

inline-flex - 인라인 블록처럼 동작합니다. 콘텐츠가 우선순위를 가집니다(가능한 경우 선이 맞도록 콘텐츠가 블록을 필요한 너비로 분산시킵니다).

플렉스 방향

블록 레이아웃의 방향은 flex-direction 속성에 의해 제어됩니다.

가능한 값:

행 - 행(기본값); row-reverse - 요소가 역순으로 있는 행입니다. 열 - 열; column-reverse - 요소가 역순으로 포함된 열입니다.

행 및 행 역방향

열 및 열 역방향

플렉스 랩

한 줄에 여러 블록이 있을 수 있습니다. 포장 여부는 flex-wrap 속성에 따라 결정됩니다.

가능한 값:

nowrap - 블록이 전송되지 않습니다(기본값). Wrap - 블록이 전송됩니다. Wrap-reverse - 블록을 역순으로 래핑하고 배치합니다.

flex-direction 및 flex-wrap 속성의 약어는 flex-flow 속성입니다.

가능한 값: 두 속성을 모두 설정하거나 하나만 설정할 수 있습니다. 예를 들어:

플렉스 흐름: 열; 플렉스 흐름: 랩 리버스; flex-flow: 열 역방향 랩;

행-역방향 랩-역방향 데모:

주문하다

블록의 순서를 제어하려면 order 속성을 사용하십시오.

가능한 값: 숫자. 블록을 먼저 넣으려면 순서를 지정하십시오: -1:

내용 정당화

요소 정렬에는 justify-content , align-items 및 align-self 와 같은 여러 속성이 있습니다.

justify-content 및 align-items는 상위 컨테이너에 적용되고 align-self는 하위 컨테이너에 적용됩니다.

justify-content는 주축 정렬을 담당합니다.

justify-content에 가능한 값:

flex-start - 요소가 주축의 시작 부분부터 정렬됩니다(기본값). flex-end - 요소는 주축의 끝에서 정렬됩니다. 중심 - 요소가 주축의 중심에 정렬됩니다. 공간 사이 - 요소는 주축을 따라 정렬되어 요소 간에 여유 공간을 분배합니다. space-around - 요소는 주축을 따라 정렬되어 주변에 여유 공간을 배포합니다.

플렉스스타트와 플렉스엔드

사이의 공간, 공간 주변의 공간

항목 정렬

align-items는 수직 축을 따라 정렬을 담당합니다.

가능한 정렬 항목 값:

flex-start - 요소는 수직 축의 시작 부분부터 정렬됩니다. flex-end - 요소는 수직 축의 끝에서 정렬됩니다. 중앙 - 요소가 중앙에 정렬됩니다. 기준선 - 요소가 기준선을 따라 정렬됩니다. Stretch - 요소가 늘어나서 수직 축을 따라 모든 공간을 차지합니다(기본값).

플렉스스타트, 플렉스엔드

기준선, 스트레칭

자기 정렬

align-self는 수직 정렬도 담당하지만 개별 플렉스 요소로 설정됩니다.

align-self에 가능한 값:

자동이 기본값입니다. 요소가 상위 요소의 정렬 항목을 사용함을 나타냅니다. flex-start - 요소가 수직 축의 시작 부분에서 정렬됩니다. flex-end - 요소가 수직 축의 끝에서 정렬됩니다. center - 요소가 중앙에 정렬됩니다. 기준선 - 요소가 기준선을 따라 정렬됩니다. Stretch - 요소가 늘어나서 전체 높이 공간을 차지합니다.

내용 정렬

여러 줄의 플렉스 컨테이너 내에서 정렬을 제어하려면 align-content 속성이 있습니다.

가능한 값:

flex-start - 요소는 주축의 시작 부분부터 정렬됩니다. flex-end - 요소는 주축의 끝에서 정렬됩니다. 중심 - 요소가 주축의 중심에 정렬됩니다. 공간 사이 - 요소는 주축을 따라 정렬되어 요소 사이에 여유 공간을 분배합니다. space-around - 요소가 주축을 따라 정렬되어 요소 주위에 여유 공간이 배포됩니다. Stretch - 전체 높이를 채우도록 요소가 늘어납니다(기본값).

플렉스스타트, 플렉스엔드

센터, 스트레칭

사이의 공간, 공간 주변의 공간

추신:예를 들어 flex-flow:columnwrap 줄이나 동일한 flex-direction:column; 플렉스 랩: 랩; .

요소는 열에 있지만 전송되지는 않습니다.

Wrap은 flex-direction:column에서는 작동하지 않습니다. , 사양에서는 다음과 같이 보입니다.

시간이 지나면 효과가 있을 것 같아요.

2014년 6월 21일부터 UPD:블록 높이를 설정하면 모든 것이 작동합니다. 팁 고마워

이 기사에서는 유연한 웹 페이지 레이아웃을 생성하도록 설계된 CSS Flexbox 기술을 소개합니다.

CSS Flexbox 기술에 대한 브라우저 지원

Flexbox 기술은 현재 사용되는 거의 모든 브라우저에서 이미 지원됩니다(접두사 사용: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Flexbox 기본 사항(그리드)

Flexbox는 그리드를 기반으로 합니다. 단 2개의 요소로만 구성됩니다. 첫 번째 요소는 플렉스 컨테이너. flex 컨테이너 생성은 필수 HTML 요소에 flex 또는 flex-inline 값을 갖는 CSS 표시 속성을 추가하여 수행됩니다.

이후 플렉스 컨테이너의 모든 직계 자식(자식)은 자동으로 플렉스 요소(두 번째 Flexbox 그리드 요소).

HTML 마크업:

Flex-container ( display: flex; /* flex || inline-flex */ ) Flexbox 그리드 구조

Flex 항목은 기본적으로 Flex 컨테이너의 전체 높이를 차지합니다.

flex 또는 flex-inline의 값에 따라 방법이 결정됩니다. 플렉스 컨테이너페이지에 표시됩니다. 다음과 같이 표현해야 하는 경우 차단하다, flex 값을 사용합니다. 요소를 다음과 같이 표현해야 하는 경우 소문자, flex-inline 값을 사용하십시오. 이 경우 해당 요소를 표시하는 데 필요한 만큼의 페이지 공간을 차지합니다.

Flex 요소 정렬 방향

Flex 컨테이너 내부의 Flex 요소 정렬 방향을 지정하는 방법은 다음과 같습니다. 축.

Flexbox에서는 할당합니다. 2개의 축. 첫 번째 축은 다음과 같습니다. 기초적인또는 기본(기본적으로 오른쪽으로 향함) 두번째 - 횡축(기본적으로 아래쪽).

Flex 컨테이너의 항목은 공간이 충분하지 않은 경우에도 기본적으로 한 줄로 정렬됩니다. Flex 요소는 주축을 따라 Flex 컨테이너에 배열됩니다.

컨테이너 내 요소의 기본 배열(Flex 컨테이너에 충분한 공간이 없는 Flex 항목은 컨테이너 외부에 있음)

CSS Flexbox에서 flex 항목을 새 줄로 이동할 수 있도록 하려면(현재 줄에 충분한 공간이 없는 경우) CSS flex 컨테이너의 flex-wrap 속성을 Wrap 또는 Wrap-reverse 로 설정하면 됩니다.

Flex-wrap: 랩; /* nowrap(한 줄 - 기본값) Wrap(플렉스 항목을 새 줄로 래핑 허용) Wrap-reverse(플렉스 항목을 역순으로 래핑) */

flex-wrap CSS 속성의 Wrap 및 Wrap-reverse 값은 교차축의 방향을 결정합니다.

flexbox의 주축 방향 설정은 flex-direction CSS 속성을 사용하여 수행됩니다.

플렉스 방향: 행; /* 행(오른쪽) - 기본 행-역방향(왼쪽) 열(아래) 열-역방향(위) */

이 속성을 사용하면 flex 요소가 가로(행)가 아닌 세로(열)로 정렬되도록 할 수 있습니다.

flex-direction 및 flex-wrap 속성은 일반 CSS 속성 flex-flow를 사용하여 지정할 수 있습니다.

Flex-flow: 행 이제 랩; /* 1개의 값 - flex-direction, 2개의 값 - flex-wrap */

플렉스 아이템 정렬

Flexbox에서는 컨테이너 내의 요소 정렬이 두 방향(축)으로 수행됩니다.

주요 축을 따라 플렉스 아이템 정렬하기

주축을 따라 요소 정렬은 justify-content CSS 속성을 사용하여 수행됩니다.

내용 정당화: flex-start; /* flex-start(flex 요소는 축의 시작을 기준으로 정렬됨) - 기본적으로 flex-end(flex 요소는 축의 끝을 기준으로 정렬됨) center(flex 컨테이너의 중앙) space-between (균등하게, 즉 플렉스 요소 사이의 거리가 동일함) space-around (균등하지만 첫 번째 플렉스 요소 앞과 마지막 플렉스 요소 뒤에 공간의 절반을 추가) */ 주축을 따라 플렉스 요소를 정렬하기 위한 옵션

교차축을 따라 플렉스 아이템 정렬하기

가로 축을 따라 플렉스 컨테이너의 플렉스 항목 정렬은 align-items CSS 속성을 사용하여 수행됩니다.

항목 정렬: 늘이기; /* 스트레치(가로 축의 전체 길이를 따라 늘이기) - 기본적으로 flex-start(가로 축의 시작을 기준으로 함) flex-end(가로 축의 끝을 기준으로 함) 기준선(기준선을 기준으로 함) ) center */ 가로축을 따라 플렉스 요소를 정렬하기 위한 옵션

플렉스 컨테이너 라인 정렬

CSS Flexbox를 사용하면 Flex 요소 자체뿐만 아니라 해당 요소가 위치한 줄도 정렬할 수 있습니다.

Align-content: 스트레치 /* 스트레치(가로 축의 전체 길이를 따라 늘어남) – 기본적으로 flex-start(가로 축의 시작을 기준으로 함) flex-end(가로 축의 끝을 기준으로 함) center( 중앙) 공백 사이(균일하게, 즉 선 사이의 거리가 동일함) 공백 주위(균등하지만 첫 번째 줄 앞과 마지막 줄 뒤에 공간의 절반을 추가) */ 플렉스 컨테이너의 줄 정렬 옵션

align-content 속성은 Flex 컨테이너의 Flex 항목이 여러 줄에 있는 경우에만 사용하는 것이 좋습니다. 이를 위해서는 먼저 모든 flex 요소의 너비가 flex 컨테이너의 너비보다 커야 하며, 두 번째로 flex 컨테이너의 flex-wrap CSS 속성이 Wrap 또는 Wrap-reverse 로 설정되어 있어야 합니다.

align-self CSS 속성

align-self 속성은 이전 속성(justify-content, align-items 및 align-content)과 달리 flex 요소용입니다. 그것은 당신이 변경할 수 있습니다 플렉스 요소 정렬가로축 방향을 따라. align-self 속성은 align-items 와 동일한 값을 가질 수 있습니다.

항목 정렬: 늘이기; /* 자동 (기본값) || 스트레칭 || 플렉스 스타트 || 플렉스엔드 || 기준선 || 중심 */

플렉스 컨테이너( 디스플레이: flex; 너비: 300px; 높이: 150px; 정렬 항목: 센터; 패딩: 10px; 배경색: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 ( flex-basis: 70px; text-align: center; padding: 15px; 글꼴 크기: 30px; ) .flex-container_element-1 ( align-self: flex-start; 배경: #fe4; ) .flex-container_element-2 ( align-self: flex-end; 배경: 분홍색; ) .flex-container_element-3 ( align-self: 스트레치; 배경: 라임; ) .flex-container_element-4 ( align-self: auto; background: 시안색; ) CSS align-self 속성의 작동 방식

플렉스 아이템의 순서 변경하기

기본적으로 Flex 항목은 HTML 코드에 나타나는 순서대로 Flex 컨테이너에 표시됩니다. CSS Flexbox의 다른 요소와 비교하여 일부 Flex 요소의 순서를 변경하려면 order 속성을 사용할 수 있습니다. 이 CSS 속성은 플렉스 컨테이너의 플렉스 요소를 번호의 오름차순으로 정렬합니다.

순서: 0; /* 0(기본값) 양수 또는 음수 */

예를 들어:

...

CSS: .flex-container ( display: flex; ) /* 두 번째 플렉스 요소를 끝으로 이동 */ .flex-container_element-2 ( order: 2; ) /* 세 번째 요소를 2로 이동 */ .flex-container_element-3 ( order: 1; ) /* 1 앞에 4개의 플렉스 요소 배치 */ .flex-container_element-4 ( order: -1; ) CSS 순서 속성 작동 방식

Flex 요소의 너비 제어

Flexbox에는 Flex 요소의 너비를 결정하는 여러 CSS 속성이 있습니다.

CSS 속성 플렉스 기반

이 속성은 다음을 위한 것입니다. 플렉스 요소의 초기 너비 설정. px, %, em 등과 같은 다양한 측정 단위를 사용하여 너비 값을 설정할 수 있습니다. 기본적으로 이 속성은 auto로 설정됩니다(이 경우 요소의 너비는 해당 콘텐츠에 따라 자동으로 계산됩니다). .

플렉스 아이템의 최종 너비는 다음에 의해 결정됩니다.이 요소뿐만 아니라 이 플렉스 컨테이너의 다른 플렉스 요소에도 설정된 flex-grow 및 flex-shrink CSS 속성의 값에 따라 달라집니다.

flex-grow CSS 속성

이 속성은 다음을 결정합니다. 플렉스 요소의 초기 너비가 증가합니다.. 플렉스 요소의 너비를 늘리는 방법은 다음과 같습니다. 여유 줄 공간. flex-grow CSS 속성의 값은 다음과 같습니다. 정수. 플렉스 요소가 차지하는 여유 공간의 부분을 결정하는 것은(1보다 크거나 같은 경우) 이 값입니다.

예를 들어:

...

CSS: .flex-container ( 디스플레이: flex; 너비: 600px; ) .flex-container_element-1 ( flex-basis: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-basis: 40% ; flex-grow: 4; ) CSS 속성 flex-grow 작동 방식

이 예에서 플렉스 항목이 같은 줄에 있고 여유 공간(600×(1-0.8)=120px)이 있는 경우:

이 공간의 1/5이 element.flex-container_element-1의 너비에 추가됩니다(120×1/5=24px).
이 공간의 4/5가 element.flex-container_element-2의 너비(120×4/5=96px)에 추가됩니다.

즉, flex-grow CSS 속성을 사용하면 flex 요소의 너비가 커질 수 있음을 지정할 수 있을 뿐만 아니라 다른 요소에 비해 이 값이 얼마나 커질 수 있는지 지정할 수도 있습니다.

기본적으로 CSS 속성 flex-grow는 0으로 설정됩니다. 이는 flex 요소가 커질 수 없음(너비 증가)을 의미합니다.

플렉스 축소 CSS 속성

이 속성은 플렉스 요소의 너비를 줄일 수 있는지 여부를 결정합니다. 플렉스 요소의 너비를 줄이는 것은 다음과 같은 경우에만 발생합니다. 선 너비가 모든 플렉스 항목을 표시하기에 충분하지 않습니다.그 안에 위치합니다. 필요한 너비는 다음과 같이 계산됩니다. 초기 너비 기준, 여기에는 모든 flex 요소가 포함되어 있습니다.

예를 들어:

...

CSS: .flex-container( 디스플레이: flex; 너비: 500px; ) .flex-container_element-1( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2( flex-basis: 300px; flex -shrink: 3; ) CSS 속성 flex-shrink 작동 방식

플렉스 컨테이너의 너비는 500px입니다. Flex 항목을 표시하려면 600px가 필요합니다. 결과적으로 100px가 누락되었습니다. 이 예에서는 2개의 플렉스 요소(.flex-container_element-1 및 .flex-container_element-2)를 줄일 수 있습니다. 이 경우 첫 번째 플렉스 element.flex-container_element-1의 너비는 300 – 1/4*100= 275px입니다. 이 경우 두 번째 플렉스 element.flex-container_element-2의 너비는 300 – 3/4*100= 225px입니다.

기본값:

플렉스 축소: 1;

필요한 경우 플렉스 요소의 너비가 감소하는 것을 방지이면 flex-shrink 속성의 값으로 숫자 0을 지정해야 합니다.

CSS 플렉스 속성

flex-grow, flex-shrink 및 flex-basis를 쉽게 설정하려면 flex CSS 속성을 사용할 수 있습니다.

기본값:

플렉스: 0 1 자동; /* 0 - flex-grow(첫 번째 값) 1 - flex-shrink(두 번째 값) auto - flex-basis(세 번째 값) */

CSS Flexbox를 사용한 페이지 레이아웃

이번 섹션에서는 Flexbox를 사용하여 간단한 반응형 레이아웃을 만들어 보겠습니다.

레이아웃 구조는 3개의 섹션으로 구성됩니다.

헤더(헤더와 메인 메뉴 표시)
main(주요 부분 표시);
바닥글(바닥글용).

주요 부분은 2개의 추가 섹션으로 나뉩니다(CSS Flexbox를 사용하여 위치 지정). 대형 화면(>=992px)에서는 이 섹션이 가로로 정렬되고 다른 화면에서는 세로로 정렬됩니다(<992px).

[페이지 헤더...]

[주요 부분...]

CSS: /* 컨테이너(뷰포트 너비에 따라 블록 너비 설정) */ .container( position:relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; ) @ media (최소 너비: 576px) ( .container ( 너비: 540px; 최대 너비: 100%; ) ) @media (최소 너비: 768px) ( .container ( 너비: 720px; 최대 너비: 100%; ) ) @media (최소 너비: 992px) ( .container ( 너비: 960px; 최대 너비: 100%; ) ) @media (최소 너비: 1200px) ( .container ( 너비: 1140px; 최대 너비: 100 % ; ) ) /* 플렉스 컨테이너 */ .row-flex ( 디스플레이: -webkit-box; 디스플레이: -webkit-flex; 디스플레이: -ms-flexbox; 디스플레이: flex; -webkit-flex-wrap: 랩; - ms-flex-wrap: Wrap; flex-wrap: Wrap; margin-right: -15px; margin-left: -15px ) /* CSS 플렉스 요소 설정 */ .col-flex ( position:relative; width: 100 %; 최소 높이: 1px; 오른쪽 패딩: 15px; 왼쪽 패딩: 15px -웹킷-플렉스: 0 0 100%; -ms-플렉스: 0 0 100%; 플렉스: 0 0 100%; 최대 너비: 100%; ) /* 대형 화면을 위한 기사 너비 및 옆 블록 */ @media (min-width: 992px) ( /* 컨테이너 너비의 2/3 */ .main_article ( -webkit-box-flex: 0; -webkit-flex : 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; 최대 너비: 66.666667% ) /* 컨테이너 너비의 1/3 */ .main_aside ( -webkit-box-flex: 0; -웹킷-플렉스: 0 0 33.333333%; -ms-플렉스: 0 0 33.333333%;

대부분의 브라우저에서 레이아웃을 지원하기 위해 CSS에 필요한 접두사와 최대 너비를 추가합니다.

블록을 플렉스 컨테이너로 "전환"하려면 row-flex 클래스를 사용합니다. flex CSS 속성을 사용하여 flex 컨테이너 내부의 각 flex 요소(main_article 및 main_aside)의 너비를 설정합니다.

예를 들어, Flexbox를 사용하여 "바닥글" 블록과 주요 기사 섹션인 "사이트의 흥미로운 내용" 섹션을 마크업해 보겠습니다.

“바닥글” 섹션을 4등분(한 부분의 최소 너비는 200px)으로 나누고, “사이트의 흥미로운 내용”을 3부분(한 부분의 최소 너비는 300px)으로 나눕니다.

[페이지 헤더...]

[주요 부분...]

[1개 더...]

[2 개 더...]

[3개 더...]

추가 CSS:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-양성: 1; flex-grow: 1; 최대 너비: 100% )

기준 치수 Flexbox 레이아웃(유연한 상자 - 현재 W3C 후보 권장 사항)은 크기를 알 수 없거나 동적일 때에도 컨테이너의 요소 간 여유 공간을 보다 효율적으로 레이아웃, 정렬 및 배포하는 방법을 제공하는 것을 목표로 합니다(따라서 "유연한"이라는 단어가 붙음). .

플렉스 레이아웃의 주요 아이디어는 컨테이너에 요소의 너비/높이(및 순서)를 변경하여 공간을 가장 잘 채울 수 있는 기능을 제공하는 것입니다(대부분의 경우 모든 유형의 디스플레이 및 화면 크기를 지원하기 위해). 플렉스 컨테이너는 요소를 늘려서 공간을 채우거나 압축하여 요소가 넘치지 않도록 합니다.

가장 중요한 점은 Flexbox 레이아웃은 일반 레이아웃(수직으로 배치된 상자 및 수평으로 배치된 인라인 요소)과 달리 방향에 독립적이라는 점입니다. 일반 레이아웃은 웹 페이지에 적합하지만 크거나 복잡한 애플리케이션(특히 화면 방향 변경, 크기 조정, 늘이기, 축소 등)을 지원하는 유연성이 부족합니다.

논평: Flexbox 레이아웃은 애플리케이션 구성요소 및 소규모 레이아웃에 가장 적합하고, Grid 레이아웃은 대규모 레이아웃에 더 적합합니다.

기초

왜냐하면 flexbox는 단일 속성이 아닌 전체 모듈이며 많은 속성을 결합합니다. 그 중 일부는 컨테이너(소위 상위 요소)에 적용되어야 합니다. 플렉스 컨테이너), 다른 속성은 하위 요소에 적용됩니다. 플렉스 요소.

일반 레이아웃이 블록 및 인라인 요소의 흐름 방향을 기반으로 하는 경우 Flex 레이아웃은 "플렉스 흐름 방향"을 기반으로 합니다. Flex 레이아웃의 기본 아이디어를 설명하는 사양에서 이 다이어그램을 확인하세요.

기본적으로 요소는 다음 중 하나에 배포됩니다. 주축(에서 메인 스타트~ 전에 메인엔드) 또는 함께 가로축(에서 교차 시작~ 전에 크로스엔드).

주축- 플렉스 요소가 위치하는 주축입니다. 수평일 필요는 없으며 모두 flex-direction 속성에 따라 달라집니다(아래 참조).
메인 스타트 | 메인엔드- 플렉스 요소는 메인 시작 위치에서 메인 끝 위치까지 컨테이너에 배치됩니다.
주요 크기- 선택한 기본 값에 따라 플렉스 요소의 너비 또는 높이. 기본 수량은 요소의 너비 또는 높이일 수 있습니다.
교차축-주 축에 수직 인 가로 축. 그 방향은 주축의 방향에 따라 달라집니다.
교차 시작 | 크로스엔드- 플렉스 라인은 요소로 채워지고 교차 시작 위치에서 교차 끝 위치까지 컨테이너에 배치됩니다.
크로스 사이즈- 선택한 치수에 따라 플렉스 요소의 너비 또는 높이가 이 값과 같습니다. 이 속성은 선택한 치수에 따라 요소의 너비 또는 높이와 동일합니다.

속성

디스플레이: 플렉스 | 인라인 플렉스;

이는 다음에 적용됩니다:

Flex 컨테이너(선택한 값에 따라 인라인 또는 블록)를 정의하고 모든 직계 하위 항목에 대한 Flex 컨텍스트를 연결합니다.

표시: 기타 값 | 플렉스 | 인라인 플렉스;

명심하세요:

CSS 열이 Flex 컨테이너와 작동하지 않습니다.
float,clear,vertical-align은 플렉스 항목에서 작동하지 않습니다.