모든 flexbox 속성. Flexbox에 대한 최종 가이드

클래스 = "컨테이너">

... 각각에 대해 지정된 의사 클래스 사용 첫번째그리고 제삼각 컨테이너에 요소가 있으면 나머지 플렉스 요소와 관련하여 블록이 1씩 증가합니다. 각각 두번째컨테이너의 요소가 다른 속성 값을 지정했습니다.

V 첫 번째컨테이너 두번째요소는 나머지 플렉스 요소와 관련하여 2만큼 증가합니다. 두번째 3인용 용기와 제삼이미 켜 네... 우리의 계산에 의존하거나 추가 기능을 사용하지 않고 요소의 너비가 비례적으로 어떻게 변하는지 주의하십시오.

V 첫 번째가리키는 컨테이너 두번째플렉스 요소 기본 크기 100픽셀, 에 두번째컨테이너 100픽셀그리고 안에 제삼이미 10000픽셀... 참고하세요 제삼크기에도 불구하고 요소는 컨테이너에서 오버플로를 일으키지 않았지만 상위 컨테이너에 남아 있는 공간으로 조정되었습니다.

컨테이너의 나머지 플렉스 요소와 관련하여 블록을 얼마나 줄일 것인지 결정하는 값(여유 공간이 충분하지 않은 경우)은 속성과 유사하게 설정됩니다. 그러나 기본값은 0이 아니라 1입니다.음수 값도 허용되지 않습니다(유효하지 않음).

값이 0인 속성은 필요한 요소 너비를 유지하면서 요소가 축소되지 않음을 결정합니다! 기본 플렉스 요소 너비(속성)의 최소값이 이 값과 함께 지정되면 요소는 이 값보다 작게 축소될 수 없습니다. 플렉스 컨테이너 오버플로 가능성이 있으므로 이 기능을 현명하게 사용하십시오. 우리는 기사의 끝에서이 순간을 고려할 것입니다.

예를 들어 보겠습니다.

이 예에서는 삼블록 플렉스 컨테이너, 그 안에 우리가 배치했습니다. 삼요소

이 기사에서는 유연한 웹 페이지 레이아웃을 만들기 위한 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 컨테이너는 flex 또는 flex-inline 값이 있는 display CSS 속성을 필수 HTML 요소에 추가하여 생성됩니다.

이후 플렉스 컨테이너의 모든 직계 자식(어린이) 자동으로 플렉스 아이템(2개 항목 플렉스박스 그리드).

HTML 마크업:

Flex-container (디스플레이: flex; / * flex || inline-flex * /) 플렉스박스 그리드의 구조

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

flex 또는 flex-inline 값은 플렉스 컨테이너페이지에 표시됩니다. 로 제시해야 하는 경우 블록그런 다음 플렉스 값을 사용하십시오. 요소를 다음과 같이 표현해야 하는 경우 소문자그런 다음 플렉스 인라인 값을 사용하십시오. 이 경우 요소를 표시하는 데 필요한 만큼 페이지에서 공간을 차지합니다.

플렉스 아이템의 배열

플렉스 컨테이너 내에서 플렉스 항목이 배치되는 방향을 지정하는 것은 다음과 같이 수행됩니다. 축.

Flexbox 하이라이트 2축... 첫 번째 축은 기초적인또는 메인(기본적으로 오른쪽으로 지정됨). 두 번째는 횡축(기본적으로 아래로 향함).

플렉스 컨테이너의 항목은 공간이 부족한 경우에도 기본적으로 정렬됩니다. 플렉스 컨테이너의 플렉스 항목을 주축 방향으로 정렬합니다.

컨테이너에 있는 항목의 기본 레이아웃(Flex 컨테이너의 공간이 부족한 Flex 항목은 유출됨)

CSS Flexbox에서 CSS flex 컨테이너의 flex-wrap 속성을 wrap 또는 wrap-reverse로 설정하면 플렉스 항목이 새 줄로 줄 바꿈되도록 허용합니다(현재 줄의 공간이 부족한 경우).

플렉스 랩: 랩; / * nowrap (한 줄 - 기본값) wrap (플렉스 항목이 새 줄로 줄 바꿈하도록 허용) wrap-reverse (플렉스 항목을 역순으로 줄 바꿈) * /

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

flexbox 주축의 방향 설정은 다음과 같이 수행됩니다. CSS 사용- 플렉스 방향 속성.

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

이 속성을 사용하면 플렉스 항목을 가로(행)가 아닌 세로(열)로 표시할 수 있습니다.

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

Flex-flow: row nowrap; / * 1 값 - 플렉스 방향, 2 값 - 플렉스 랩 * /

플렉스 항목 정렬

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

플렉스 아이템을 주축 방향으로 정렬

기본 축을 따라 항목 정렬은 CSS justify-content 속성을 사용하여 수행됩니다.

콘텐츠 정당화: 플렉스 시작; / * flex-start(플렉스 항목은 축의 원점에 정렬됨) - 기본적으로 flex-end(플렉스 항목은 축의 끝에 정렬됨) center(플렉스 컨테이너의 중심까지) space- between(균일하게 , 즉, 플렉스 항목 사이의 거리가 동일) space-around (균일하지만 첫 번째 플렉스 항목 앞과 마지막 항목 뒤에 공백을 절반 추가) * / 주 축을 따라 플렉스 항목을 정렬하기 위한 옵션

교차 축을 따라 플렉스 항목 정렬

align-items CSS 속성을 사용하여 교차 축 방향을 따라 플렉스 컨테이너의 플렉스 항목을 정렬합니다.

정렬 항목: 스트레치; / * stretch(교차축의 전체 길이로 늘이기) - 기본값은 flex-start(교차축의 시작부터) flex-end(교차축의 끝에서) baseline(기준선에서) center(to 가운데) * / 가로 축을 따라 플렉스 항목에 대한 정렬 옵션

플렉스 컨테이너 라인 정렬

CSS Flexbox를 사용하면 플렉스 항목 자체뿐만 아니라 항목이 위치한 줄도 정렬할 수 있습니다.

Align-content: stretch / * stretch(교차 축의 전체 길이를 따라 늘이기) - 기본적으로 flex-start(교차 축의 시작을 기준으로 함) flex-end(교차 축의 끝을 기준으로 함) 중심( 가운데) space-between (균등하게, 즉, 줄 사이에 같은 간격으로) space-around (균일하게, 그러나 첫 번째 줄 앞과 마지막 줄 뒤에 공백의 절반 추가) * / 플렉스 컨테이너 줄을 정렬하기 위한 옵션

align-content 속성은 플렉스 컨테이너의 플렉스 항목이 여러 줄에 걸쳐 있을 때만 의미가 있습니다. 이렇게 하려면 먼저 모든 플렉스 항목의 너비가 플렉스 컨테이너의 너비보다 커야 하고, 두 번째로 플렉스 컨테이너에 flex-wrap에 대한 wrap 또는 wrap-reverse CSS 속성이 있어야 합니다.

자체 CSS 속성 정렬

align-self 속성은 이전 속성(justify-content, align-items 및 align-content)과 달리 플렉스 항목용입니다. 그것은 당신이 변경할 수 있습니다 플렉스 아이템 정렬가로축 방향으로. align-self 속성은 align-items와 동일할 수 있습니다.

정렬 항목: 스트레치; / * 자동(기본값) || 스트레칭 || 플렉스 스타트 || 플렉스 엔드 || 기준 || 센터 * /

플렉스 컨테이너(디스플레이: 플렉스, 너비: 300픽셀, 높이: 150픽셀, 정렬 항목: 센터, 패딩: 10픽셀, 배경색: #efefef;) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4(플렉스 기반: 70px, 텍스트 정렬: 센터, 패딩: 15px, 글꼴 크기: 30px;) .flex-container_element-1(정렬 셀프: 플렉스 시작, background: # fe4;) .flex-container_element-2 (align-self: flex-end; background: pink;) .flex-container_element-3 (align-self: stretch; background: 라임;) (align-self: auto; background: cyan;) align-self CSS 속성의 작동 방식

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

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

주문: 0; / * 0(기본값) 양수 또는 음수 정수 * /

예를 들어:

CSS: .flex-container (디스플레이: flex;) / * 2개의 플렉스 항목을 끝까지 이동 * / .flex-container_element-2 (순서: 2;) / * 3개의 항목을 2로 이동 * / .flex-container_element-3 (order: 1;) / * 4개의 플렉스 항목을 1로 위치 * / .flex-container_element-4 (order: -1;) order CSS 속성의 작동 방식

플렉스 아이템의 너비 제어하기

Flexbox에는 플렉스 항목의 너비를 결정하는 여러 CSS 속성이 있습니다.

플렉스 기반 CSS 속성

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

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

flex-grow CSS 속성

이 속성은 다음 여부를 결정합니다. 증가(증가)할 플렉스 항목의 초기 너비... 플렉스 항목의 너비를 늘리는 것은 다음과 같이 수행됩니다. 여유 공간 라인... flex-grow CSS 속성의 값은 다음과 같습니다. 정수... 플렉스 항목이 자체적으로 차지하는 여유 공간의 양을 결정하는 것은 이 값입니다(1보다 크거나 같은 경우).

예를 들어:

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

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

• flex-container_element-1은 이 공간의 1/5을 요소 너비에 추가합니다(120 × 1/5 = 24px).
• flex-container_element-2는 해당 공간의 4/5를 너비에 추가합니다(120 × 4/5 = 96px).

즉, CSS flex-grow 속성을 사용하면 플렉스 항목의 너비가 커질 수 있음을 나타낼 뿐만 아니라 다른 항목과 관련하여 해당 크기가 얼마나 커질 수 있는지 설정할 수 있습니다.

기본적으로 CSS flex-grow 속성은 0으로 설정됩니다. 이는 플렉스 항목이 커질 수 없음(폭 확장)을 의미합니다.

flex-shrink CSS 속성

이 속성은 플렉스 항목의 너비를 축소할 수 있는지 여부를 제어합니다. 플렉스 항목은 다음 경우에만 축소됩니다. 선 너비는 모든 플렉스 항목을 표시하기에 충분하지 않습니다.그 안에 위치. 필요한 너비는 다음을 위해 계산됩니다. 초기 너비의 기준모든 플렉스 항목이 있습니다.

예를 들어:

CSS: .flex-container (디스플레이: 플렉스; 너비: 500px;) .flex-container_element-1 (플렉스 기반: 300px; 플렉스 축소: 1;) .flex-container_element-2 (플렉스 기반: 300px, 플렉스 -shrink: 3;) flex-shrink CSS 속성이 작동하는 방식

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

기본값:

플렉스 수축: 1;

필요한 경우 플렉스 아이템이 줄어들지 않도록이면 flex-shrink 속성에 숫자 0을 지정해야 합니다.

플렉스 CSS 속성

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

기본값:

플렉스: 0 1 자동; / * 0 - 플렉스 성장(1 값) 1 - 플렉스 축소(2 값) 자동 - 플렉스 기반(3 값) * /

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

이 섹션에서는 간단한 반응형 Flexbox 레이아웃을 만듭니다.

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

• 헤더(헤더 및 메인 메뉴 표시용);
• main(주요 부분을 표시하기 위해);
• 바닥글(바닥글용).

메인 부분(main)은 차례로 2개의 섹션으로 더 나뉩니다(CSS Flexbox를 사용하여 배치할 것입니다). 에 대형 스크린(> = 992px) 이 섹션은 수평으로 정렬되고 나머지 섹션은 수직으로(<992px).

[페이지 헤더 ...]

[주요 부분...]

CSS: / * 컨테이너(뷰포트 너비에 따라 블록 너비 설정) * / .container(위치: 상대; 여백-왼쪽: 자동; 여백-오른쪽: 자동; 패딩-오른쪽: 15px; 패딩-왼쪽: 15px;) @ 미디어 (최소 너비: 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 (위치: 상대; 너비: 100 %; min-height: 1px; padding-right: 15px; padding-left: 15px;) / * 기사 및 옆 상자의 기본 너비 * / .main_article, .main_aside (-webkit-box-flex: 0; -웹킷-플렉스: 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 -box-flex: 0, -webkit-flex: 0 0 33.333333%, -ms-flex: 0 0 33.333333%, flex: 0 0 33.333333%, 최대 너비: 33.333333%;))

대부분의 브라우저에서 레이아웃을 지원하려면 필요한 접두사와 최대 너비를 CSS에 추가하세요.

상자를 플렉스 컨테이너로 "전환"하려면 row-flex 클래스를 사용합니다. flex CSS 속성을 사용하여 플렉스 컨테이너 내부의 각 플렉스 항목(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-positive: 1, flex-grow: 1, 최대 너비: 100%;)

대니 마르코프

디자인은 매우 간단합니다. 중앙 정렬된 컨테이너로 구성되며 내부에는 헤더, 메인 섹션, 사이드바 및 바닥글이 있습니다. 다음은 CSS와 HTML을 가능한 한 깨끗하게 유지하기 위해 수행해야 하는 주요 "테스트"입니다.

1. 레이아웃의 네 가지 주요 섹션을 배치합니다.
2. 페이지를 반응형으로 만듭니다(작은 화면에서 사이드바가 기본 콘텐츠 아래로 떨어짐).
3. 헤더 콘텐츠 정렬 - 왼쪽의 탐색, 오른쪽의 버튼.

보시다시피 비교를 위해 최대한 단순하게 했습니다. 첫 번째 테스트부터 시작하겠습니다.

과제 1: 페이지 섹션 배치

플렉스박스 솔루션

display: flex를 컨테이너에 추가하고 자식의 세로 방향을 설정합니다. 이렇게 하면 모든 섹션이 다른 섹션 아래에 배치됩니다.

컨테이너(디스플레이: flex; flex-direction: 열;)

이제 메인 섹션과 사이드바를 나란히 만들어야 합니다. 플렉스 컨테이너는 일반적으로 단방향이므로 추가 요소를 추가해야 합니다.

그런 다음 이 요소를 표시하도록 설정합니다. flex 및 flex-direction은 반대 방향입니다.

메인 및 사이드바 래퍼(디스플레이: 플렉스, 플렉스 방향: 행;)

마지막 단계는 메인 섹션과 사이드바의 크기를 설정하는 것입니다. 우리는 메인 콘텐츠가 사이드바보다 3배 더 넓기를 원합니다. 이는 플렉스 또는 백분율로 쉽게 수행할 수 있습니다.

보시다시피 Flexbox는 잘 작동했지만 상당한 CSS 속성과 추가 HTML 요소도 필요했습니다. CSS 그리드가 어떻게 작동하는지 봅시다.

CSS 그리드 솔루션

CSS 그리드에는 여러 가지 사용 사례가 있지만 목적에 가장 적합한 것으로 grid-template-areas 구문을 사용합니다.

먼저 페이지의 각 섹션에 대해 하나씩 4개의 그리드 영역을 정의합니다.

헤더(그리드 영역: 헤더;) .main(그리드 영역: 메인;) .sidebar(그리드 영역: 사이드바;) 바닥글(그리드 영역: 푸터;)

이제 메쉬를 사용자 정의하고 각 영역의 위치를 ​​정의할 수 있습니다. 코드가 처음에는 다소 복잡해 보일 수 있지만 그리드 시스템에 익숙해지면 이해하기 쉬워집니다.

컨테이너(디스플레이: 그리드; / * 그리드의 열 크기와 수를 결정합니다. fr 단위는 Flexbox처럼 작동합니다. 열은 값에 따라 행의 여유 공간을 나눕니다. 두 개의 열이 있습니다. 첫 번째는 3입니다. * / Grid-template -columns: 3fr 1fr; / * 이전에 만든 영역을 그리드의 위치에 연결합니다. 첫 번째 줄은 헤더이고 두 번째 줄은 메인 섹션과 사이드바 사이로 나뉩니다. 마지막 줄은 바닥글입니다. * / grid-template-areas: "header header" " main sidebar "" footer footer "; / * 그리드 셀 사이의 간격은 60px입니다. * / grid-gap: 60px;)

그게 다야! 레이아웃은 이제 위의 구조를 따르고 여백이나 패딩을 처리할 필요가 없도록 조정했습니다.

도전 2. 반응형 페이지 만들기

플렉스박스 솔루션

이 단계는 이전 단계와 밀접하게 관련되어 있습니다. Flexbox 솔루션의 경우 플렉스 방향을 변경하고 여백을 조정해야 합니다.

@media (최대 너비: 600px) (.main-and-sidebar-wrapper(flex-direction: 열;) .main(오른쪽 여백: 0, 여백-하단: 60px;))

우리 페이지는 매우 간단하므로 미디어 쿼리에서 작업이 거의 없지만 더 복잡한 레이아웃에는 많은 재작업이 필요합니다.

CSS 그리드 솔루션

그리드 영역을 이미 정의했으므로 미디어 쿼리에서 재정렬하기만 하면 됩니다. 동일한 열 설정을 사용할 수 있습니다.

@media (max-width: 600px) (.container (/ * 모바일 레이아웃을 위한 그리드 영역 정렬 * / grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer";))

또는 이것이 더 깨끗한 솔루션이라고 생각되면 전체 레이아웃을 처음부터 다시 정의할 수 있습니다.

@media (최대 너비: 600px) (.container (/ * 그리드를 1열 레이아웃으로 재작업 * / grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" " 바닥글";) )

테스트 3: 헤더 구성 요소 정렬

플렉스박스 솔루션

단추

우리는 이미 이전 기사 중 하나에서 Flexbox와 유사한 레이아웃을 수행했습니다. 이 기술은 매우 간단합니다.

헤더(디스플레이: flex; justify-content: space- between;)

탐색 목록과 버튼이 이제 올바르게 정렬됩니다. 안에 물건을 넣는 일만 남았다