Flexbox의 정렬에 대해 알아야 할 모든 것. FlexBox의 실제 적용 Flexbox 학습 및 사용 방법
안녕, 하브르!
어느 좋은 저녁, 흥미로운 것을 예고하지 않고 우리 채팅은 2012년 봄에 쓴 "5개의 정말 유용한 반응형 마크업 템플릿을 코드로 변환"이라는 출판물의 저자로부터 리메이크 기사를 작성하라는 제안을 받았지만 FlexBox를 사용했습니다. 그리고 무엇이 어떻게 작동하는지에 대한 설명이 함께 제공됩니다. 약간의 의심이 있은 후에도 사양을 더 깊이 이해하려는 관심이 여전히 남아 있었고 나는 행복하게 앉아서 동일한 예를 입력했습니다. 우리가 이 분야에 몰입하면서 많은 뉘앙스가 명확해지기 시작했고 이는 단순히 레이아웃을 재설계하는 것 이상의 의미로 성장했습니다. 일반적으로 이 기사에서는 "CSS 유연한 상자 레이아웃 모듈"이라는 훌륭한 사양에 대해 이야기하고 그 중 일부를 보여주고 싶습니다. 흥미로운 기능및 적용 사례. 해킹에 관심이 있는 모든 분들을 초대합니다.
제가 주목하고 싶은 점은 FlexBox에서 레이아웃을 생성하려면 개발자가 어느 정도 적응해야 한다는 것입니다. 내 자신의 예에서 나는 수년간의 경험이 잔인한 농담을하고 있다고 느꼈습니다. FlexBox에서는 흐름의 요소 정렬에 대해 약간 다른 사고 방식이 필요합니다.
기술적인 부분
예제로 넘어가기 전에 이 사양에 포함된 속성과 작동 방식을 이해하는 것이 좋습니다. 그 중 일부는 처음에는 그다지 명확하지 않고 일부는 현실과 관련이없는 신화에 둘러싸여 있기 때문입니다.그래서. FlexBox에는 두 가지 주요 유형의 요소가 있습니다. Flex Container와 해당 요소 하위 요소- 플렉스 아이템. 컨테이너를 초기화하려면 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; 디스플레이: 플렉스; 플렉스 방향: 열; 플렉스: 자동; ) .header(너비: 100%; 최대 너비: 960px; 최소 너비: 430px; 여백: 0 자동 30px; 패딩 : 30px 0 10px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-wrap: 랩; justify-content: 공백 사이; 상자 크기: 테두리 상자; ) .main( 너비: 100%; 최대 너비 : 960px; 최소 너비: 430px; 여백: 자동; flex-grow: 1; 상자 크기: 테두리 상자; ) .footer ( 배경: #222; 너비: 100%; 최대 너비: 960px; 최소 너비 : 430px; 색상: #eee; 여백: 자동; 패딩: 15px; 상자 크기: 테두리 상자; )
flex-grow: 1을 .main에 지정했기 때문입니다. 사용 가능한 전체 높이까지 늘어나서 바닥글을 아래쪽으로 누릅니다. 이 솔루션의 장점은 바닥글의 높이가 고정되지 않을 수 있다는 것입니다.
이제 헤더에 로고와 메뉴를 배치해 보겠습니다.
.logo( 글꼴 크기: 0; 여백: -10px 10px 10px 0; 디스플레이: flex; 플렉스: 없음; 정렬 항목: 센터; ) .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; 색상: #eee; 텍스트 장식: 없음; 여백: 5px 0 0 5px; 디스플레이: -webkit-flex; 디스플레이: 플렉스; justify-content: 센터; 정렬 항목: 센터; )
헤더에 flex-wrap: Wrap; 내용 정당화: 공백 사이; 로고와 메뉴는 헤더의 서로 다른 면에 흩어져 있으며, 메뉴를 위한 공간이 부족할 경우 로고 아래로 우아하게 이동됩니다.
다음으로 큰 게시물이나 배너가 보입니다. 구체적으로 무엇인지 말하기는 어렵지만 그게 요점이 아닙니다. 오른쪽에는 이미지가 있고 왼쪽에는 제목이 있는 텍스트가 있습니다. 저는 개인적으로 레이아웃이 적응형인지 정적인지에 관계없이 모든 요소가 최대한 유연해야 한다는 생각을 고수합니다. 따라서 이 게시물에는 그림이 배치된 사이드바가 있습니다. 엄밀히 말하면, 오늘은 큰 그림이 있고 내일은 작은 그림이 있고 요소를 다시 실행하고 싶지 않기 때문에 정확히 어느 너비가 필요한지 말할 수 없습니다. 매번 처음부터. 즉, 필요한 위치를 차지하려면 사이드바가 필요하고 나머지 공간은 콘텐츠로 이동됩니다. 이렇게 해보자:
상자( 글꼴 크기: 1.25rem; 줄 높이: 1.5; 글꼴 스타일: 기울임꼴; 여백: 0 0 40px -50px; 디스플레이: -webkit-flex; 디스플레이: flex; flex-wrap: 포장; justify-content: 중앙; ) .box-base ( 여백 왼쪽: 50px; 플렉스: 1 0 430px; ) .box-side ( 여백 왼쪽: 50px; 플렉스: 없음; ) .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; 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%; ) .grid-title ( text-align: center; ) @media screen 및 (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . 그리드-img(플렉스: 0 0 자동; ) .grid-itm:nth-child(even) .grid-img(여백: 0 0 0 30px; 순서: 2; ) .grid-itm:nth-child(odd) .grid-img ( 여백: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media 화면 및 (max-width: 600px) ( .grid-img (표시: 없음; ) )
사실 이는 FlexBox로 구현할 수 있는 것의 작은 부분일 뿐입니다. 이 사양을 사용하면 간단한 코드를 사용하여 매우 복잡한 페이지 레이아웃을 구축할 수 있습니다.
Flexbox(플렉시블 박스 레이아웃 모듈) 사양가로 또는 세로 방향으로 요소를 배치하는 방법입니다.
Flexbox는 상위 Flex 컨테이너와 하위 Flex 항목에 대한 속성 집합을 결합합니다.
요소가 플렉스 컨테이너가 되려면 요소를 할당해야 합니다. 디스플레이: 플렉스;또는 디스플레이: 인라인 플렉스;(각각 블록 또는 라인).
Flex 컨테이너 내부에는 주 축과 이에 수직인 가로 축이라는 두 개의 축이 생성됩니다. 먼저 플렉스 요소는 주축을 따라 정렬된 다음 가로 축을 따라 정렬됩니다.
Flex 컨테이너 속성 |
|
| 플렉스 방향 | 주축의 방향을 정의합니다. 가능한 값:
|
| 플렉스 랩 | 컨테이너가 여러 줄인지 여부를 결정합니다. 가능한 값:
|
| 플렉스 플로우 | flex-direction과 flex-wrap이라는 두 개의 매개변수를 한 번에 정의합니다. 예를 들어 flex-flow: 컬럼 랩; |
| 정당화 내용 | 주축을 따라 요소의 정렬을 결정합니다. 가능한 값:
|
| 항목 정렬 | 가로 축을 따라 요소의 정렬을 결정합니다. 가능한 값:
|
| 내용 정렬 | Flex 항목 전체 행의 교차축 정렬을 결정합니다. 가능한 값:
이 속성은 단일 행 Flex 컨테이너에서는 작동하지 않습니다. |
Flex 요소 속성 |
|
| 주문하다 | Flex 컨테이너 내에 단일 Flex 요소가 표시되는 순서를 결정합니다. 정수로 지정됩니다. 기본값은 0이고 요소는 자연스러운 흐름 순서로 서로 이어집니다. 의미 주문하다절대 위치가 아닌 시퀀스에서 요소 위치의 가중치를 지정합니다. |
| 플렉스 기반 | 컨테이너 내에 공간을 할당하기 전에 플렉스 아이템의 기본 크기를 정의합니다. px, %, em 및 기타 측정 단위로 지정할 수 있습니다. 본질적으로 이는 요소가 늘어나거나 압축되는 일종의 시작점입니다. 기본값 - 자동, 내부 콘텐츠의 크기에 따라 요소의 크기가 달라집니다. |
| 유연하게 성장하다 | 플렉스 아이템이 기본 크기에 추가할 컨테이너 내부의 여유 공간을 결정합니다. 비율로 사용되는 정수로 지정됩니다. 기본값은 0입니다. 모든 요소가 플렉스 성장: 1, 그러면 모두 같은 크기가 됩니다. 하나의 플렉스 항목을 2로 설정하면 기본 크기가 다른 항목의 두 배로 추가됩니다. |
| 플렉스 수축 | 공간이 충분하지 않은 경우 Flex 컨테이너 내부의 인접 요소 감소에 따라 Flex 요소가 얼마나 줄어들지 결정합니다. 비율로 사용되는 정수로 지정됩니다. 기본값은 1입니다. 하나의 플렉스 요소가 플렉스 축소: 2, 컨테이너가 포함된 요소의 기본 크기의 합보다 작은 경우 다른 것보다 기본 크기에서 두 배만큼 차감됩니다. |
| 몸을 풀다 | flex-grow, flex-shrink, flex-basis의 세 가지 매개변수를 한 번에 정의합니다. 예를 들어, flex: 1 1 200px; |
| 자기 정렬 | 기본 정렬을 재정의하거나 항목 정렬, 특정 플렉스 요소에 대한 것입니다. 가능한 값:
|
실제로 Flexbox를 사용하는 기능
1. 오른쪽 정렬
HTML, CSS 등 인터넷 기술의 발전으로 개발자들에게 웹사이트를 제작할 수 있는 새로운 기회가 끊임없이 열리고 있습니다. 문제 중 하나는 오래된 버전의 브라우저가 있다는 것입니다. 이는 주로 Internet Explorer, 특히 Windows XP를 사용하는 사용자에게 적용됩니다.
인터넷 페이지 레이아웃 디자이너는 종종 페이지에서 CSS 블록을 정렬하는 작업에 직면합니다. 예를 들어, 모든 블록을 차례로 배열하거나 수평으로 배치하거나 컨테이너 중앙이나 바닥에 배치하는 등의 작업을 할 수 있습니다. display - flex 속성 매개변수의 출현으로 이 작업이 크게 단순화되었습니다. 이 기술은 하위 요소, 즉 블록이나 컨테이너 내의 요소를 레이아웃하도록 설계되었습니다. 이 레이아웃의 매개변수는 충분합니다.
따라서 먼저 상위 컨테이너를 만들어야 합니다. 명확성을 위해 주위에 프레임이 나타나도록 만들어 보겠습니다. 컨테이너의 CSS 코드는 다음과 같습니다.
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
내용 정렬:늘이기;
}
주요 속성은 표시:플렉스. 하위 요소를 여러 줄에 배치하려면 flex-wrap:wrap 속성을 추가합니다.
그리고 재산만 내용 정렬 CSS 블록을 배치하고 정렬하는 방법을 지정합니다. 매개변수 뻗기블록이 컨테이너 내에서 균등한 간격으로 배치되도록 합니다. 동시에 높이가 자동으로 선택될 수 있습니다. 그것은 어떻게 생겼나요? 내부 블록에 CSS를 추가해 보겠습니다.
컨테이너 사업부(
너비: 50px;
배경:녹색;
여백:5px;
}
우리는 일부러 높이를 설정하지 않습니다. HTML 코드는 다음과 같습니다:
코드의 결과는 그림에 나와 있습니다.
블록의 높이도 지정하면 어떻게 되나요?
컨테이너 사업부(
너비: 50px;
높이: 50px;
배경:녹색;
여백:5px;
}
이제 높이를 제거하고 블록의 너비를 100%로 만들어 보겠습니다.
컨테이너 사업부(
너비: 100%;
배경:녹색;
여백:5px;
}
우리는 그것을 얻습니다.
또 다른 매개변수 내용 정렬~이다 센터중앙의 모든 블록을 정렬할 수 있습니다.
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
내용 정렬:가운데;
}
.컨테이너 div(
너비: 50px;
높이:50px;
배경:녹색;
여백:5px;
}
결과:
기타 옵션 플렉스엔드속성 내용 정렬컨테이너 바닥에 블록을 배치할 수 있습니다.
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
콘텐츠 정렬:플렉스 엔드;
}
매개변수 플렉스 스타트모든 것을 정반대로 할 것입니다.
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
콘텐츠 정렬:flex-start;
}
다른 속성 매개변수 내용 정렬, 플렉스 컨테이너를 사용하지 않고는 결과를 생성하기가 쉽지 않습니다. 사이의 공간. 속성은 첫 번째 줄을 위쪽에, 두 번째 줄을 아래쪽에 배치하여 그 사이에 빈 공간을 만듭니다.
CSS 코드의 일부:
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
내용 정렬:공간 사이;
}
결과:
재산 우주 주변상단과 하단에 빈 공간을 추가합니다. 게다가 각각은 중앙의 빈 공간의 절반과 같습니다.
컨테이너(
너비:450px;
높이:250px;
테두리: 1px 솔리드 #000000;
디스플레이: 플렉스;
플렉스 랩: 랩;
내용 정렬:주변 공간;
}
그래서 CSS 속성은 내용 정렬많은 매개변수가 있습니다: 늘이기, 플렉스 시작, 플렉스 끝, 중앙, 공백 사이, 공백 주변.
위의 예에서 볼 수 있듯이 CSS align-content 속성의 한 매개변수를 변경하면 flex 기술을 사용하여 CSS 블록 정렬을 완전히 다른 방식으로 사용합니다. 이 코드는 Internet Explorer 버전 10 이하에서는 작동하지 않습니다.
이 기사에서는 유연한 웹 페이지 레이아웃을 생성하도록 설계된 CSS Flexbox 기술을 소개합니다.
CSS Flexbox의 목적
CSS Flexbox는 유연한 레이아웃 만들기. 이 기술을 사용하면 컨테이너의 요소를 매우 간단하고 유연하게 배열하고, 요소 사이에 사용 가능한 공간을 분배하고, 특정 치수가 없더라도 어떤 방식으로든 정렬할 수 있습니다.
CSS Flexbox를 사용하면 Float 및 위치 지정을 사용하는 것보다 반응형 디자인을 훨씬 쉽게 만들 수 있습니다.
Flexbox는 전체 페이지와 개별 블록의 CSS 마크업 모두에 사용될 수 있습니다.
CSS Flexbox에 대한 브라우저 지원
CSS Flexbox는 현재 사용 중인 모든 최신 브라우저에서 지원됩니다(접두사 사용: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .
CSS Flexbox 기본 사항
Flexbox를 사용하여 CSS 마크업을 만드는 작업은 필수 HTML 요소의 CSS 표시 속성을 flex 또는 flex-inline 으로 설정하는 것부터 시작됩니다.
그 후, 이 요소는 플렉스 컨테이너가 되며, 그 모든 요소는 직접하위 요소는 플렉스 요소입니다. 게다가 flexbox에 관해 이야기할 때 우리는 display:flex 또는 display:flex-inline과 모든 요소를 포함하는 요소만을 의미합니다. 곧장그 안에 위치합니다. 따라서 CSS Flexbox에는 Flex 컨테이너와 Flex 요소라는 두 가지 유형의 요소만 있습니다.
대부분의 브라우저에서 레이아웃을 지원하기 위해 접두사 및 최대 너비 속성이 CSS에 추가되었습니다.
블록을 플렉스 컨테이너로 "전환"하려면 행 클래스를 사용하세요. Flex 컨테이너 내부의 .col__article 및 .col__aside flex 요소의 너비 설정은 flex CSS 속성을 사용하여 수행됩니다.
예를 들어 flexbox를 사용하여 또 다른 바닥글을 마크업하고 .col__article 요소에 세 요소로 구성된 블록을 생성해 보겠습니다(한 요소의 최소 너비는 300px입니다). 바닥글에 4개의 블록을 배치하겠습니다(한 블록의 최소 너비는 200px입니다).
order 속성은 Flex 컨테이너 내에 하위 요소가 나타나는 순서를 제어합니다. 기본적으로 Flex 컨테이너에 원래 추가된 순서대로 정렬됩니다.
가치
.flex-item(주문:<целое число>; }Flex 항목은 HTML 코드를 변경하지 않고도 이 간단한 속성을 사용하여 재정렬할 수 있습니다.
기본값: 0.
유연하게 성장하다
이 속성은 여유 공간을 할당할 때 Flex 컨테이너의 다른 Flex 항목에 비해 Flex 항목이 얼마나 늘어나는지 결정하는 증가율을 지정합니다.
가치
.flex-item(플렉스 성장:<число>; }모든 flex 항목의 flex-grow 값이 동일한 경우 모든 항목은 컨테이너에서 동일한 크기를 갖습니다.
두 번째 Flex 항목은 다른 Flex 항목의 크기에 비해 더 많은 공간을 차지합니다.
기본값: 0.
플렉스 수축
flex-shrink는 음수 여유 공간을 배포할 때 Flex 컨테이너의 다른 Flex 항목에 비해 Flex 항목이 얼마나 축소되는지 결정하는 축소 요소를 지정합니다.
가치
.flex-item( 플렉스 축소:<число>; }기본적으로 모든 flex 항목은 축소될 수 있지만 flex-shrink 값을 0(축소 없음)으로 설정하면 항목이 원래 크기를 유지합니다.
기본값: 1.
음수는 허용되지 않습니다.
플렉스 기반
이 속성은 width 및 height 속성과 동일한 값을 가지며 비율에 따라 여유 공간이 할당되기 전 flex 요소의 초기 기본 크기를 지정합니다.
가치
.flex-item ( flex-basis: 자동 |<ширина>; }flex-basis는 네 번째 플렉스 항목에 대해 지정되며 초기 크기를 지정합니다.
기본값:자동.
몸을 풀다
이 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 약어입니다. 다른 값 중에서 자동(1 1 자동) 및 없음(0 0 자동)을 설정할 수도 있습니다.
가치
.flex-item (플렉스: 없음 | 자동 | [기본값: 0 1 자동 .
W3C에서는 flex가 일반적인 사용을 위해 지정되지 않은 구성 요소를 올바르게 재설정하므로 개별 속성 대신 flex 단축 속성을 사용할 것을 권장합니다.
자기 정렬
align-self 속성을 사용하면 개별 플렉스 항목에 대한 기본 정렬(또는 align-items를 통해 지정된 값)을 재정의할 수 있습니다. 사용 가능한 값을 이해하려면 Flex 컨테이너에 대한 align-items 설명을 참조하세요.
가치
.flex-item ( align-self: auto | flex-start | flex-end | center | 기준선 | 늘이기; )세 번째 및 네 번째 플렉스 요소의 경우 align-self 속성을 통해 정렬이 재정의되었습니다.
