Javascript가 없는 적응형 메뉴. 인터페이스용 Flexbox: 기본 패턴 HTML5 컨테이너 만들기
안녕하세요 여러분! 홈페이지에 따르면 2018년 초 사용해도 되나요, Flexbox의 레이아웃는 브라우저에서 97.8% 지원됩니다. 이는 웹사이트 레이아웃에 대한 새로운 기술과는 거리가 멀다는 것을 보여주는 훌륭한 지표입니다. 이제 이 편리한 레이아웃 방법을 사용하지 않을 이유가 없습니다. 이젠 어떻게 할거야?
여러 레이아웃을 만든 후 CSS 가변상자, 더 이상 오래된 것으로 돌아가고 싶지 않습니다 뜨다레이아웃 디자이너들 사이에서 가장 선호하는 프레임워크인 부트스트랩. 하지만, 부트스트랩유명한 그리드를 사용하면 미디어 쿼리에 대해 걱정할 필요가 없기 때문에 아직 작성하기에는 너무 이릅니다.
이번 강의에서는 일반적인 웹사이트 헤더를 디자인하겠습니다. 적응형 메뉴사용하여 가변상자 CSS방법.
헤더는 세 개의 논리 블록으로 구성됩니다.
- 로고 블록
- 목록에 메뉴가 생성되어 차단
- 아이콘과 전화번호로 차단
이 세 블록은 공통 외부 블록 래퍼에 배치됩니다. 머리글, 그 자체 내에서 수행됩니다. 디스플레이: 플렉스;세 블록 동안.
블록 내부 네비게이션, 다시 적어보자 디스플레이: 플렉스;메뉴 항목의 경우. 이렇게 하면 화면 크기가 줄어들 때 메뉴 항목을 다른 항목 아래에 정렬할 수 있어 유연성을 얻을 수 있습니다.
명확한 시연을 위해 최선을 다하겠습니다. HTML사이트 헤더에 대한 마크업입니다.
+380973457685
스타일을 사용하지 않고도 모자가 이렇게 보일 것입니다. 그래야 합니다.
이제 주목! 두 개의 블록을 지정하는 것으로 충분합니다. 디스플레이: 플렉스;헤더의 전체 내용이 한 줄로 그려집니다.
머리글(
디스플레이: 플렉스;
}
헤더 .menu ul (
디스플레이: 플렉스;
}
이것이 작동하는 방식입니다 플렉스박스.
*{여백: 0;
패딩: 0;
}
몸 (
배경색: #fff;
글꼴 모음: "Open Sans", 산세리프체;
줄 높이: 1.5;
}
머리글(
테두리: 2px 단색 #ccc;
디스플레이: 플렉스;
플렉스 랩: 랩; /*줄 바꿈 */
내용 정당화: 공백 사이; /*내용을 가장자리까지 밀어 넣습니다 */
항목 정렬: 중앙; /*요소를 세로 중앙에 정렬 */
}
헤더.로고(
왼쪽 패딩: 30px;
}
헤더 .menu ul (
디스플레이: 플렉스;
목록 스타일: 없음;
}
헤더 .menu ul li (
여백: 20px 10px;
}
헤더 .menu ul a (
텍스트 변환: 대문자;
텍스트 장식: 없음;
글꼴 두께: 굵게;
색상: #06a327;
}
핸드폰 (
글꼴 크기: 110%;
색상: #333;
오른쪽 패딩: 40px;
}
우리는 헤더의 적응성을 연구하고 있습니다.
사이트 적응성 프로세스의 핵심은 사이트 요소가 표시되지 않거나 엉성해 보이는 제어 지점을 찾는 것입니다. 브라우저를 너비로 압축할 때 우리의 임무는 문제를 확인하고 스타일 파일에 적절한 코드(미디어 쿼리)를 추가하여 수정하는 것입니다.
예를 들어 화면 너비가 900픽셀인 경우 전화기가 있는 블록이 헤더의 왼쪽 가장자리에 밀착됩니다.
이번 호에서 우리는 할 것입니다 효과가 있는 가로 메뉴호버에. 글꼴 아이콘을 연결하고, mix-blend-mode: Multiply를 사용하여 레이어 블렌딩 모드를 활성화하고, :hover 의사 클래스를 사용하고, desplay:flax에 익숙해지세요. 이 모든 작업은 순수 CSS3에서 수행됩니다.
HTML의 메뉴 와이어프레임
아카이브를 컴퓨터에 다운로드하고 압축을 푸세요. 여기에는 스타일 파일이 있는 CSS, 아이콘이 있는 글꼴 폴더, 배경 그림이 있는 img 등 세 개의 폴더가 포함되어 있습니다.
모든 것을 현재 작업 중인 개발 환경으로 이동하세요. 모든 코드는 phpstorm으로 작성하겠습니다. 모든 폴더와 파일을 여기에 복사하고 index.html을 열고 메뉴 프레임에 대한 설명을 시작하겠습니다.
body 태그를 작성합니다
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
아이콘 이름:
- 쇼핑 카트
- 섬기는 사람
- 폴더 열기
- 신문-o
CSS 스타일링
마크업을 마친 후 스타일 지정을 진행합니다. 본문에서 style.css를 열고 배경과 글꼴을 Verdana로 설정합니다.
본문( 배경 이미지: url("../img/escheresque_ste.png"); 글꼴 계열: Verdana; )
메뉴 블록의 배경을 설정하고 상단에서 100픽셀 들여쓰기합니다. 전체 화면을 채울 너비입니다.
Dws-menu( 배경색: 흰색; 여백 상단: 100px; 너비: 100%; )
Ul 블록에서는 desplay:flax를 사용하여 목록을 수평으로 정렬하고, 패딩을 제거하고, justify-content:center를 사용하여 요소를 중앙에 배치합니다.
Ul.dws-ul(display: flex; padding: 0; justify-content: center; )
LI 목록에서 마커를 제거하고 모든 면에서 10개의 피크만큼 들여쓰기합니다.
Li.dws-li( 목록 스타일: 없음; 패딩: 10px; )
링크에서 밑줄을 제거하고 텍스트를 18픽셀로 늘립니다. 그리고 검정색으로 만들어주세요.
Li.dws-li a( 텍스트 장식: 없음; 글꼴 크기: 18px; 색상: #000; )
margin-right:10px 를 사용하여 아이콘을 오른쪽으로 약간 이동합니다.
Li.dws-li a i( 여백-오른쪽: 10px; )
호버 애니메이션
기본 디자인을 마친 후 호버 애니메이션으로 넘어가겠습니다.
마우스를 올렸을 때 요소의 이름을 강조 표시하는 추가 의사 요소를 만들어 보겠습니다.
왼쪽을 설명하고 링크를 선택하고 의사 요소 li.dws-li a::before 를 할당하고 빈 콘텐츠를 작성합니다:''; , 20 장의 사진. 그리고 봉우리의 높이는 3개이다. 충분한. 색상을 설정하고 블록이 나타나도록 위치를 지정하십시오. 링크를 기준으로; , 링크에 절대 위치를 지정하고 맨 아래로 낮추고 왼쪽 가장자리까지 누릅니다.
Li.dws-li a( ... 위치: 상대; ) li.dws-li a::before( ... 위치: 절대; 위쪽: 100%; 왼쪽: 0; )
이 블록을 복제하고 ::after 의사 요소를 할당합니다. left 매개변수를 right 로 변경하고 다른 색상 #ff2117 을 선택하세요.
Li.dws-li a::after( 내용: ""; 너비: 20px; 높이: 3px; 배경색: #ff2117; 위치: 절대; 위쪽: 100%; 오른쪽: 0; )
그런 다음 호버 애니메이션을 수행합니다. li를 선택하고 약간 더 어두운 배경을 지정합니다.
Li.dws-li:hover( 배경색: #e5eae8; )
이렇게 하려면 마우스를 올려놓은 목록을 선택하고 너비가 50%인 의사 요소를 목록에 추가한 다음 X축을 따라 왼쪽에서 오른쪽으로 변환을 설정합니다. 이것은 그녀에게 움직임을 줄 것입니다.
Li.dws-li:hover a:before( width: 50%; 변환: translateX(100%); )
::after 의사 요소에 대해 동일한 작업을 반복하고 이제 오른쪽에서 왼쪽으로 이동을 설정하겠습니다.
Li.dws-li:hover a:after( width: 50%; 변환: translateX(-100%); )
Li.dws-li a::before( ... 전환: .5s; 혼합 혼합 모드: 곱셈; ) li.dws-li a::after( ... 전환: .5s; 혼합 혼합 모드 : 곱하다;
결과는 꽤 좋았습니다. 이제 너비를 0으로 설정하고 링크에 마우스를 올렸을 때 빨간색을 추가해 보겠습니다.
Li.dws-li a:hover( 색상: #e62117; )
Li.dws-li a( ... 패딩: 5px; ) li.dws-li a::before( ... 상단: 90%; ) li.dws-li a::after( ... 상단: 90 %;
기본적으로 제가 원하는 메뉴를 보여드렸더니 꽤 괜찮은 메뉴가 나오더군요.
수업은 Denis Gorelov가 준비했습니다.
부동 요소와 여백 조작을 기반으로 한 페이지 레이아웃 시대는 거의 과거의 일입니다. CSS는 개발자에게 레이아웃 생성을 위한 새롭고 향상된 속성을 제공합니다. 수직 정렬, 요소 간의 균일한 거리, 레이아웃의 순서를 변경하지 않고 요소 배열 변경, "접착된 바닥글"과 같은 기타 패턴과 같은 전통적인 레이아웃 작업은 Flexbox를 사용하여 쉽게 구현됩니다.
이 기사에서는 Flexbox 구현에 적합한 레이아웃 패턴을 살펴보겠습니다. 예를 들어, 원자 디자인의 원리를 구현하는 Tracks 애플리케이션의 인터페이스를 사용하겠습니다. Flexbox가 유용한 상황에 대해 이야기하고 Flexbox를 특정 레이아웃 패턴과 결합할 때의 함정에 대해 언급하겠습니다. 문제를 일으키는 패턴을 살펴보고, 문제 해결을 위한 대체 방법을 제공하고, 지금 이 속성을 사용하기 시작하기 위한 추가 전술을 제공하겠습니다.
유연한 원자 구성 요소
트랙 인터페이스는 브래드 프로스트(Brad Frost)의 원칙에 따라 각 부분을 개별적으로 살펴보는 접근 방식을 취합니다.
원자 디자인 철학은 웹 디자인을 위한 레고 블록과 동일하다고 생각할 수 있습니다. 유기체, 분자, 원자와 같은 과학 용어는 개발자에게 인터페이스 요소의 분류를 제공하고 그에 따라 각 조각을 전체의 일부로 더 깊이 이해하는 데 사용됩니다. 이러한 분류 방법을 사용하면 이러한 패턴을 식별할 수 있으며 격자, 색상, 거리와 같은 외부 요인이 이 프로세스에 영향을 미치는 것을 방지할 수 있습니다. 미시적 수준에서 인터페이스를 구축하면 기본 미시적 요소를 더 많이 재사용할 수 있습니다.
그림 1: 이러한 응용 프로그램 요소는 원자 설계 원리를 기반으로 데이터를 표시하는 데 사용됩니다. 어느 것이 Flexbox를 사용하는지 추측할 수 있나요? (더 큰 버전)
그림 2. Flexbox 및 Atomic 디자인을 활용하는 Tracks 애플리케이션의 기본 인터페이스. (더 큰 버전)
인터페이스 디자인은 흐름 및 사용자 인터페이스에 대한 문서와 함께 InVision에 프로토타입 세트로 제출되었습니다. 초기 UI 감사 중에 Flexbox를 구현하는 것이 적합한 영역을 식별하기 시작했습니다. 또한 일반적으로 플로팅 상자로 구현되는 전통적인 "왼쪽에 사이드바, 오른쪽에 주요 콘텐츠" 패턴을 사용하여 페이지 레이아웃에 Flexbox를 사용하기로 결정했습니다.
Html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target (display: flex; flex-direction: row; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li ( display: inline-block; /* 대신 부동 위치 레이아웃 시스템을 사용할 수도 있음 */ )
Flexbox 지원을 사용할 수 없는 경우 display: inline-block 을 사용합니다. 브라우저에서 JavaScript가 비활성화된 경우 동일한 선언에 no-js 클래스를 추가합니다. CSS 캐스케이드는 Flexbox나 JavaScript가 없거나 로딩 문제가 있는 경우에도 작동합니다. Flexbox는 float, display: table 및 position:relative와 공존할 수 있습니다. Flexbox를 지원하는 브라우저는 이를 우선적으로 사용하는 반면 이를 지원하지 않는 브라우저는 전통적인 CSS 레이아웃 메커니즘으로 제한됩니다.
항상 그렇듯이 최종 기술 선택은 프로젝트 목표, 예산 및 분석 데이터에 따라 달라집니다. 나의 황금률은 항상 프로젝트에 가장 현명한 옵션을 선택하는 것입니다.
선 패턴
내비게이션 구성 요소는 구현 용이성뿐만 아니라 소요 시간 감소로 인해 Flexbox에 매우 적합한 것으로 나타났습니다. 인라인 패턴은 개발자의 시간을 잡아먹는 것으로 악명 높지만 Flexbox를 사용하면 몇 분 밖에 걸리지 않습니다. IE9 이전 시대에 이와 같은 것을 구현했다면 이것이 얼마나 중요한지 이해하게 될 것입니다.
그림 3: 이 관리 패널 탐색은 세로 중앙에 탐색 요소가 있는 선 패턴을 사용합니다. (더 큰 버전)
관리자 패널 탐색 패턴 마크업은 링크를 래핑하는 탐색 태그로 구성됩니다. 이 패턴의 HTML은 다음과 같습니다.
그리고 해당 스타일은 다음과 같습니다.
Nav ( display: flex; align-items: center; /* 탐색 항목을 세로로 가운데에 배치 */ ) nav a ( display: inline-block; /* IE 10의 order 속성이 있는 인라인 요소의 레이아웃 문제를 방지하려면 */ ) nav a (플렉스: 1; )
CSS는 마크업만큼 미니멀한 것으로 나타났습니다. 탐색 링크에 지정된 인라인 블록을 확인하세요. 이 선언은 order 속성을 사용하여 요소의 순서를 변경하기로 결정한 경우 IE10에서 발생할 수 있는 향후 문제를 해결합니다. 또한 플렉스 컨테이너의 직계 자손에게 주어진 모든 여백은 IE10에서 레이아웃 문제를 일으킨다는 것을 알고 있습니다. 이러한 문제를 방지하려면 항상 브라우저 간 레이아웃을 확인하는 것이 좋습니다.
그림 4. 중앙에 로고가 있는 헤더 탐색 패턴은 웹에서 흔히 볼 수 있으며 Flexbox에 쉽게 적용됩니다. (더 큰 버전)
전통적으로 인라인 패턴은 일반적으로 의미론적 마크업을 사용하여 구현되지 않지만 Flexbox를 사용하면 이러한 트릭 없이도 수행할 수 있습니다.
레이아웃은 중앙 로고의 왼쪽과 오른쪽에 배치된 메뉴 항목 모음으로 구성됩니다. 이 패턴의 마크업은 다음과 같습니다.
Flexbox를 사용하면 HTML 해킹의 필요성을 줄이고 마크업에서 알 수 있듯이 의미를 보존할 수 있습니다. 이 HTML은 향후 사용될 가능성이 높기 때문에 의미론적 지원이 중요합니다. 이 논의의 범위를 넘어서는 다른 많은 이유가 있습니다.
Flexbox 이전에 개발자는 인라인 레이아웃을 구성하기 위해 display: inline-block 및 심지어 float: left 접근 방식을 사용했습니다. Flexbox는 이제 실행 가능한 옵션이며 개발자는 더 이상 아름다운 디자인을 위해 나쁜 방법을 사용하도록 강요받지 않습니다. 필요한 CSS는 그림 3의 이전 패턴 예제만큼 간결하지는 않지만 이전 방법보다 구현하기가 더 쉽습니다.
Pipeline-header ( display: flex; align-items: center; justify-content: space-between; ) .pipeline-header > a ( display: inline-block; /* IE 10은 순서를 인식하지 못하므로 이렇게 합니다. 이상한 레이아웃을 피하기 위해 */ ) .pipeline-logo ( flex: 1; order: 2; text-align: center; ) .pipeline-nav ( flex: 1.25; order: 1; ) .pipeline-search ( flex: 1; 순서: 3; ) (순서: 4; )
그림 3에 표시된 패턴으로 Flexbox를 사용할 때 마크업의 순서가 변경될 수 있다는 점을 기억하세요. 로고를 이동해야 하는 경우 order 속성을 사용하여 쉽게 수행할 수 있습니다. 마크업의 순서는 접근성에 중요하며 Flexbox의 경우 특히 브라우저 간 접근성 구현이 다양하다는 점을 고려할 때 논란의 여지가 있습니다. 브라우저(Firefox 제외) 및 화면 판독기는 키보드 탐색을 위해 CSS에서 생성된 시각적 순서가 아닌 레이아웃 순서를 사용합니다.
그림 5: 마크업으로 표현되고 브라우저에서 렌더링되는 흐름, 마크업을 변경하지 않고 Flexbox를 사용하여 순서를 다시 지정합니다. (더 큰 버전)
다음은 그러한 레이아웃에 대한 코드입니다. 마크업은 요소의 순서를 변경하는 데 사용되지 않습니다.
여기서 CSS는 그림 5 오른쪽 다이어그램의 요소 순서를 변경하는 데 사용됩니다.
컨테이너( display: flex; flex-direction: columns; /* 행이 기본값입니다 */ ) 헤더( 순서: 2; ) 기본( 순서: 3; ) 바닥글( 순서: 1; )
이러한 유형의 레이아웃은 단순한 탐색 이상의 용도로 사용됩니다. 바닥글에서 보신 적이 있을 겁니다.
그림 6: 탐색에 사용한 것과 동일한 패턴이 바닥글에도 사용됩니다. (더 큰 버전)
이 패턴을 사용할 때는 컨테이너에 콘텐츠 공간이 충분하지 않을 수 있다는 점에 유의하세요. 콘텐츠가 중앙에서 가장자리로 퍼져야 합니까? 이것이 레이아웃의 나머지 부분에 어떤 영향을 미치나요? 프로젝트를 시작하기 전에 이러한 질문에 대해 생각해 보십시오. 그리고 키보드 탐색은 사용자에게 중요하다는 점을 명심하세요.
라인 입력 필드
모양은 디자인상 악몽이 될 수 있습니다. 특히 Photoshop에서 만든 복잡한 격자 구조와 밀접하게 결합되어 있는 경우 더욱 그렇습니다. 내가 부르는 "인라인 라벨" 패턴은 Fender Stratocaster가 록 음악에 중요한 것처럼 우리 업계에 중요합니다.
그림 7: 인라인 레이블과 입력 필드는 Flexbox를 사용할 수 있는 또 다른 영역입니다. 그러나 텍스트의 양에 따라 레이블 텍스트가 입력 필드에서 어떻게 뒤로 밀려나는지 주의하십시오. (더 큰 버전)
이전 섹션에서 언급한 것처럼 브라우저 크기가 변경되거나 동적 콘텐츠가 있는 경우 컨테이너 내에서 콘텐츠가 배포되는 방법을 결정해야 합니다.
그림 8: 콘텐츠 확장 방법을 결정합니다. 왼쪽에는 중앙에 수직 정렬이 있는 디스플레이:테이블이 있고, 오른쪽에는 중앙 정렬이 있는 가변 상자가 있습니다. (더 큰 버전)
이 스크린샷은 동적이거나 큰 콘텐츠의 Flexbox 오류를 명확하게 보여줍니다. 오른쪽 이미지의 효과는 제가 '중앙 밀기'라고 부르는 것으로, 새로운 콘텐츠가 중앙에서 바깥쪽으로 밀려나는 것을 의미합니다.
다음은 그림 8의 선 레이블 패턴에 대한 마크업입니다.
문제에 대한 해결책은 display: table;을 사용하는 것입니다. 긴 텍스트의 경우. 이를 통해 콘텐츠가 중앙에서 가장자리로 흐르지 않고 위에서 아래로 흐를 수 있습니다.
양식 그룹( 디스플레이: flex; ) .form-group 라벨( 디스플레이: 테이블; 수직 정렬: 중간; ) .form-group 입력( flex: 1; )
Flexbox와 display:table의 조합은 더 살펴볼 가치가 있는 훌륭한 기술입니다. 하지만 이를 사용할 때에는 적시에 버그를 식별하기 위해 항상 테스트 환경에서 레이아웃을 확인하는 것이 중요합니다.
그림 9: 동일한 줄에 입력 필드와 버튼을 사용하면 높이를 동일하게 유지하여 디자인의 균형이 만들어집니다. (더 큰 버전)
나는 이 패턴을 사용하여 구현된 검색 필드를 많이 보았습니다. 이는 다양한 템플릿에서 재사용할 수 있는 매우 유연한 패턴입니다. 물론 CSS는 상황별 속성을 사용하여 패턴 다양성을 도입할 수 있습니다.
필수 HTML은 일반적이며 Flexbox 구조에 대한 div 래퍼를 포함합니다.
스타일은 다음과 같습니다.
양식 그룹( 표시: flex; ) .form-group 입력( flex: 1; )
드롭 다운 메뉴
그림 10. 드롭다운 메뉴가 있는 페이지 섹션은 빠른 위치 지정을 위해 Flexbox 기능을 사용하여 강조 표시됩니다. (더 큰 버전)
드롭다운 메뉴는 세로 중앙에 인라인 항목이 포함된 왼쪽 열과 각 항목이 해당 행에 있는 오른쪽 항목 목록으로 구성됩니다.
그림 11. 기본 인터페이스 메뉴는 레이아웃을 위해 Flexbox를 사용하여 구축되었습니다. (더 큰 버전)
이 탐색 메뉴의 마크업은 다음 HTML을 기본으로 사용합니다.
해당 CSS는 개발자가 좋아하는 방식으로 간단하고 명확합니다.
메뉴( 디스플레이: flex; ) .menu__options ( 디스플레이: flex; align-items: center; ) .menu__items ( 디스플레이: flex; flex-direction: 열; )
필요한 레이아웃은 몇 줄의 코드로 완료됩니다. 또한 이 코드는 그리드 구조와 분리되어 있으며 마크업은 의미론적 의미를 유지합니다. 이는 복잡한 위치 지정과 복잡한 레이아웃을 방지하는 Flexbox 기능의 또 다른 예입니다.
미디어 객체
그림 12: 미디어 객체 패턴은 고정 너비 SVG를 왼쪽에 배치하고 나머지 Flexbox 콘텐츠를 그 옆에 배치하는 Flexbox를 사용합니다. (더 큰 버전)
"미디어 개체"라고 알려진 이 보편적인 패턴은 이미지나 비디오를 한쪽에 배치하고 나머지 콘텐츠는 그 옆에 배치합니다.
Medi-obj( 디스플레이: flex; align-items: flex-start; ) .media-obj__body( flex: 1; )
그림 13. 이는 브라우저 창 크기를 조정하는 극단적인 경우로, 이미지는 최대 너비로 설정되고 오른쪽은 flex 1로 설정됩니다. 고정 너비 요소와 플렉스 요소를 혼합할 때는 주의하세요.
Flexbox는 이 패턴과 잘 작동하지만 미디어 콘텐츠는 위에 표시된 것과 같은 방식으로 다른 콘텐츠와 상호 작용할 수 있으므로 주의하세요. 예제에서는 그래픽 공간이 어떻게 축소되고 텍스트가 위에서 밀려 나오는지 확인할 수 있습니다. 이것은 어리석은 예처럼 보일 수 있습니다. 왜냐하면 누가 브라우저를 그렇게 좁게 만들겠습니까? 그러나 그것이 중요한 것은 아닙니다. Flexbox를 사용하기 전에 콘텐츠가 환경과 어떻게 관련되는지 이해하면 됩니다.
이 패턴에 대한 해결책은 Flexbox 내부의 미디어에 대해 이미지를 max-width: 100%로 설정하거나 고정된 이미지 너비와 미디어 쿼리를 사용하여 필요에 따라 조정하는 것입니다.
Flexbox 달력
달력은 가장 일반적인 위젯 중 하나입니다. 테이블을 사용하면 어떨까요? 우리의 경우 달력은 단순히 날짜를 선택하는 데 사용되므로 일, 월, 연도에 대한 버튼을 사용하고 해당 버튼을 행 테두리로 제한하기로 결정했습니다(각 주 달력 행은 별도의 div에 래핑됩니다). 이 접근 방식을 사용하면 마크업의 양을 줄이고 레이아웃을 더 쉽게 만들 수 있습니다.
간단히 말해서 Flexbox 레이아웃은 한때 어려웠던 문제에 대한 간단한 솔루션을 제공합니다. 예를 들어 요소를 수직으로 정렬해야 하는 경우, 바닥글을 화면 하단으로 누르는 경우, 여러 블록을 한 행에 삽입하여 여유 공간을 모두 차지하도록 하는 경우입니다. 비슷한 문제는 플렉스 없이도 해결할 수 있습니다. 그러나 일반적으로 이러한 솔루션은 의도된 목적이 아닌 다른 목적으로 CSS를 사용하는 기술인 "목발"과 비슷합니다. 반면 Flexbox를 사용하면 이러한 작업이 Flex 모델이 의도한 대로 정확하게 해결됩니다.
CSS 유연한 상자 레이아웃 모듈(유연한 블록이 있는 레이아웃을 위한 CSS 모듈), 줄여서 Flexbox는 다양한 너비와 높이에 적용되는 HTML 디자인을 포함하여 다양한 HTML 디자인을 만들 때 단점을 제거하고 레이아웃을 논리적이고 단순하게 만들기 위해 만들어졌습니다. . 그리고 일반적으로 논리적 접근 방식은 결과가 확인되지 않은 예상치 못한 곳에서 작동합니다. 논리가 전부입니다!
Flexbox를 사용하면 컨테이너 내부 요소의 다양한 매개변수(방향, 순서, 너비, 높이, 정렬 및 가로 정렬, 여유 공간 분포, 요소 늘이기 및 압축)를 우아하게 제어할 수 있습니다.
기본 지식
FlexBox는 컨테이너와 해당 항목(유연한 요소)으로 구성됩니다.
Flexbox를 활성화하려면 HTML 요소에 CSS 속성인 display:flex;만 할당하면 됩니다. 또는 디스플레이:인라인-플렉스; .
flex 속성을 활성화하면 컨테이너 내부에 주축과 가로축(수직(⊥), 교차축)이라는 두 개의 축이 생성됩니다. 첫 번째 수준의 모든 중첩 요소는 주축을 따라 정렬됩니다. 기본적으로 기본 축은 수평이고 왼쪽에서 오른쪽(→)을 향하고, 교차 축은 그에 따라 수직이며 위에서 아래(↓)를 향합니다.
주축과 교차축을 교체할 수 있으며, 요소는 위에서 아래로 배치되고(↓) 높이가 더 이상 맞지 않으면 왼쪽에서 오른쪽으로 이동합니다(→). 즉, 축이 단순히 위치를 바꿨습니다. . 이 경우 요소 배열의 시작과 끝은 변경되지 않고 방향(축)만 변경됩니다! 이것이 컨테이너 내부의 축을 상상해야 하는 이유입니다. 그러나 어떤 "물리적" 축이 있고 그것이 무언가에 영향을 미친다고 생각해서는 안 됩니다. 여기서 축은 컨테이너 내부 요소의 이동 방향입니다. 예를 들어, 주축 중심에 요소 정렬을 지정한 다음 이 주축의 방향을 변경하면 정렬이 변경됩니다. 요소는 가로 중앙에 있었지만 세로 중앙에 있게 되었습니다. 예를 참조하세요.
Flexbox의 또 다른 중요한 특징은 가로 방향으로 행이 존재한다는 것입니다. 우리가 말하는 내용을 이해하기 위해 기본 가로 축이 있고 많은 요소가 있으며 컨테이너에 "맞지" 않아 다른 행으로 이동한다고 가정해 보겠습니다. 저것들. 컨테이너는 내부에 두 개의 행이 있는 컨테이너로, 각 행에는 여러 요소가 포함되어 있습니다. 소개? 이제 요소뿐만 아니라 행도 수직으로 정렬할 수 있다는 점을 기억하세요! 이것이 어떻게 작동하는지 속성에 대한 예에서 명확하게 볼 수 있습니다. 개략적으로 보면 다음과 같습니다.
레이아웃 모델에 영향을 미칠 수 있는 CSS 속성: 부동, 투명, 수직 정렬, 열은 플렉스 디자인에서 작동하지 않습니다. 여기서는 레이아웃 구성을 위한 다른 모델이 사용되며 이러한 CSS 속성은 무시됩니다.
Flexbox CSS 속성
Flexbox에는 전체 Flex 디자인을 제어하는 다양한 CSS 규칙이 포함되어 있습니다. 일부는 기본 컨테이너에 적용되어야 하고 다른 일부는 이 컨테이너의 요소에 적용되어야 합니다.
컨테이너용
표시하다:요소의 flex 속성을 활성화합니다. 이 속성은 요소 자체와 해당 중첩 요소를 포함합니다. 첫 번째 수준 하위 요소만 영향을 받습니다. 이들은 Flex 컨테이너의 요소가 됩니다.
- 몸을 풀다- 요소는 전체 너비를 확장하고 주변 블록 사이에 전체 공간을 갖습니다. 줄 바꿈은 블록의 시작과 끝에서 발생합니다.
- 인라인 플렉스- 요소가 다른 요소를 둘러쌉니다. 이 경우 내부 부분은 블록 요소로 형식화되고 요소 자체는 인라인으로 형식화됩니다.
flex와 inline-flex는 display:block 및 display:inline-block과 유사하게 주변 요소와 다르게 상호 작용한다는 점에서 다릅니다.
플렉스 방향:컨테이너의 주축 방향을 변경합니다. 그에 따라 가로 축이 변경됩니다.
- 행(기본값)- 왼쪽에서 오른쪽으로 요소의 방향(→)
- 열- 위에서 아래로 요소의 방향(↓)
- 행 역방향- 요소의 방향은 오른쪽에서 왼쪽(←)입니다.
- 열 역방향- 아래에서 위로 요소의 방향 ()
컨테이너에 맞지 않는 요소의 전송을 제어합니다.
- 지금 랩(기본값)- 중첩된 요소는 컨테이너에 맞는지 여부에 관계없이 한 행(방향=행) 또는 한 열(방향=열)에 배치됩니다.
- 포장하다- 요소가 컨테이너에 맞지 않으면 다음 행으로 요소를 이동하는 것을 포함합니다. 이를 통해 가로 축을 따라 요소를 이동할 수 있습니다.
- 랩 리버스- 랩과 동일하게 전송만 아래로 향하지 않고 위로(반대 방향으로) 이루어집니다.
flex-direction 및 flex-wrap 속성을 모두 결합합니다. 함께 사용되는 경우가 많기 때문에 코드를 적게 작성하기 위해 flex-flow 속성을 만들었습니다.
flex-flow는 공백으로 구분된 이 두 속성의 값을 허용합니다. 또는 모든 속성에 대해 단일 값을 지정할 수 있습니다.
/* 플렉스 방향만 */ flex-flow: row; 플렉스 흐름: 행 역방향; 플렉스 흐름: 열; 플렉스 흐름: 열 역방향; /* flex-wrap만 */ flex-flow: nowrap; 플렉스 플로우: 랩; 플렉스 흐름: 랩 리버스; /* 두 값을 동시에: flex-direction 및 flex-wrap */ flex-flow: row nowrap; flex-flow: 열 랩; flex-flow: 열 역방향 랩 역방향; 정당화 내용:
기본 축을 따라 요소를 정렬합니다. 방향=행인 경우 가로로, 방향=열인 경우 세로로 정렬합니다.
- 플렉스 스타트(기본값)- 요소는 처음부터 진행됩니다(마지막에 약간의 공간이 남을 수 있음).
- 플렉스엔드- 요소는 끝에 정렬됩니다(공간은 처음에 유지됩니다).
- 센터- 중앙에 (왼쪽과 오른쪽에 공간이 남습니다)
- 공백 사이- 가장 바깥쪽 요소가 가장자리에 밀착됩니다(요소 사이의 공간이 고르게 분포됩니다).
- 우주 주변- 여유 공간이 요소들 사이에 균등하게 분배됩니다(가장 바깥쪽 요소가 가장자리에 눌리지 않음). 컨테이너 가장자리와 외부 요소 사이의 공간은 행 중앙에 있는 요소 사이의 공간의 절반입니다.
- 공간 균등하게
가로 축을 따라 요소가 포함된 행을 정렬합니다. 반대 축에 대해서만 justify-content와 동일합니다.
참고: 행이 2개 이상 있을 때 작동합니다. 행이 1개만 있으면 아무 일도 일어나지 않습니다.
저것들. flex-direction: row 인 경우 이 속성은 보이지 않는 행을 수직으로 정렬합니다. 여기서 중요한 점은 블록의 높이가 엄격하게 설정되어야 하고 행의 높이보다 커야 한다는 것입니다. 그렇지 않으면 행 자체가 컨테이너를 늘려서 블록 사이에 여유 공간이 없기 때문에 블록의 정렬이 의미가 없게 됩니다. ... 하지만 flex-direction:column 이면 행이 수평으로 이동하고 → 컨테이너의 너비가 거의 항상 행의 너비보다 크며 행을 정렬하는 것이 즉시 의미가 있습니다...
- 늘이기(기본값)- 행을 늘려 행을 완전히 채웁니다.
- 플렉스 스타트- 행은 컨테이너 상단에 그룹화됩니다(끝 부분에 약간의 공간이 남을 수 있음).
- 플렉스엔드- 행은 컨테이너 하단에 그룹화됩니다(처음에는 공간이 유지됩니다).
- 센터- 행은 컨테이너 중앙에 그룹화됩니다(공간은 가장자리에 유지됩니다).
- 공백 사이- 바깥쪽 행이 가장자리에 밀착됩니다(행 사이의 공간이 고르게 분포됩니다).
- 우주 주변- 여유 공간이 행 사이에 균등하게 분배됩니다(가장 바깥쪽 요소가 가장자리에 밀착되지 않음). 컨테이너 가장자리와 외부 요소 사이의 공간은 행 중앙에 있는 요소 사이의 공간의 절반입니다.
- 공간 균등하게- space-around 와 동일하며 외부 요소와 컨테이너 가장자리 사이의 거리만 요소 사이의 거리와 동일합니다.
행(보이지 않는 행) 내에서 가로 축을 따라 요소를 정렬합니다. 저것들. 행 자체는 align-content 를 통해 정렬되고, 이러한 행(행) 내의 요소는 align-items 를 통해 모두 가로 축을 따라 정렬됩니다. 주축을 따라 그러한 구분이 없으며 행과 요소가 justify-content 를 통해 정렬된다는 개념이 없습니다.
- 늘이기(기본값)- 선을 완전히 채우기 위해 요소가 늘어납니다.
- 플렉스 스타트- 요소는 행의 시작 부분까지 눌려집니다.
- 플렉스엔드- 요소는 행의 끝까지 눌러집니다.
- 센터- 요소는 행의 중앙에 정렬됩니다.
- 기준선- 요소는 텍스트 기준선에 맞춰 정렬됩니다.
컨테이너 요소의 경우
플렉스 성장:컨테이너에 여유 공간이 있을 때 요소의 확대 비율을 설정합니다. 기본 flex-grow: 0 즉, 어떤 요소도 늘어나서 컨테이너의 여유 공간을 채워서는 안 됩니다.
기본 flex-grow: 0
- 모든 요소에 대해 flex-grow:1을 지정하면 모든 요소가 동일하게 늘어나 컨테이너의 여유 공간을 모두 채웁니다.
- 요소 중 하나에 flex-grow:1을 지정하면 컨테이너의 여유 공간이 모두 채워지고 justify-content를 통한 정렬이 더 이상 작동하지 않습니다. 정렬할 여유 공간이 없습니다...
- flex-grow 사용:1 . 그 중 하나에 flex-grow:2가 있으면 다른 모든 것보다 2배 더 커집니다.
- 플렉스 컨테이너 내부의 모든 플렉스 박스에 flex-grow:3이 있으면 크기가 동일합니다.
- flex-grow:3 을 사용합니다. 그 중 하나에 flex-grow:12가 있으면 다른 모든 것보다 4배 더 커집니다.
어떻게 작동하나요? 컨테이너의 너비가 500px이고 기본 너비가 100px인 두 요소가 포함되어 있다고 가정해 보겠습니다. 이는 컨테이너에 300개의 사용 가능한 픽셀이 남아 있음을 의미합니다. 이제 flex-grow:2;를 지정하면; , 두 번째 flex-grow: 1; , 블록은 컨테이너의 사용 가능한 전체 너비를 차지하며 첫 번째 블록의 너비는 300px이고 두 번째 블록의 너비는 200px입니다. 이는 컨테이너에서 사용 가능한 300px의 여유 공간이 2:1 비율(첫 번째 요소의 경우 +200px, 두 번째 요소의 경우 +100px)로 요소 간에 분배되었다는 사실로 설명됩니다.
참고: 값에 분수를 지정할 수 있습니다(예: 0.5 - flex-grow:0.5).
플렉스 수축:요소의 감소율을 설정합니다. 이 속성은 flex-grow의 반대이며 컨테이너에 여유 공간이 남아 있지 않은 경우 요소가 어떻게 축소되어야 하는지를 결정합니다. 저것들. 모든 요소의 크기 합계가 컨테이너 크기보다 클 때 속성이 작동하기 시작합니다.
기본 flex-shrink:1
컨테이너의 너비가 600px이고 너비가 각각 300px인 두 요소가 포함되어 있다고 가정해 보겠습니다. - flex-basis:300px; . 저것들. 두 요소가 컨테이너를 완전히 채웁니다. 첫 번째 요소에 flex-shrink: 2를 지정합니다. , 두 번째 flex-shrink: 1; . 이제 컨테이너 너비를 300px만큼 줄여 보겠습니다. 요소가 컨테이너 내부에 맞도록 300픽셀 축소되어야 합니다. 즉, 2:1 비율로 줄어듭니다. 첫 번째 블록은 200px로 줄어들고 두 번째 블록은 100px로 줄어들며 새 요소 크기는 100px과 200px가 됩니다.
참고: 값에 분수를 지정할 수 있습니다(예: 0.5 - flex-shrink:0.5).
가변 기반:요소의 기본 너비, 즉 요소 너비에 영향을 미치는 다른 조건이 계산되기 전의 너비를 설정합니다. 값은 px, em, rem, %, vw, vh 등으로 지정할 수 있습니다. 최종 너비는 기본 너비와 flex-grow, flex-shrink 값 및 블록 내부 내용에 따라 달라집니다. 자동을 사용하면 요소는 내부 콘텐츠를 기준으로 기본 너비를 얻습니다.
기본값: 자동
때로는 일반적인 width 속성을 통해 요소의 너비를 설정하는 것이 더 나을 때도 있습니다. 예를 들어 너비: 50%; 이는 컨테이너 내부의 요소가 정확히 50%임을 의미하지만 flex-grow 및 flex-shrink 속성은 계속 작동합니다. 이는 flex-basis에 지정된 것보다 더 많이 요소 내부의 콘텐츠에 의해 요소가 늘어날 때 필요할 수 있습니다. 예.
Stretch와 Shrink가 0으로 설정된 경우 flex-basis는 "rigid"가 됩니다. flex-basis:200px; 플렉스 성장:0; 플렉스 수축:0; . 이 모든 내용은 다음과 같이 작성할 수 있습니다: flex:0 0 200px; .
flex: (축소 기준 증가)세 가지 속성에 대한 간략한 요약: flex-grow flex-shrink flex-basis .
기본값: flex: 0 1 자동
그러나 하나 또는 두 개의 값을 지정할 수 있습니다.
플렉스: 없음; /* 0 0 자동 */ /* 숫자 */ flex: 2; /* flex-grow (flex-basis는 0이 됨) */ /* 숫자가 아님 */ flex: 10em; /* 플렉스 기준: 10em */ 플렉스: 30px; /* flex-basis: 30px */ flex: auto; /* 플렉스 기반: 자동 */ 플렉스: 콘텐츠; /* flex-basis: 콘텐츠 */ flex: 1 30px; /* flex-grow 및 flex-basis */ flex: 2 2; /* flex-grow 및 flex-shrink(flex-basis는 0이 됨) */ flex: 2 2 10%; /* flex-grow 및 flex-shrink 및 flex-basis */ align-self:
단일 요소에 대해서만 align-items 속성을 변경할 수 있습니다.
기본값: align-items 컨테이너에서
- 뻗기- 요소가 늘어져 선을 완전히 채웁니다.
- 플렉스 스타트- 요소가 줄의 시작 부분까지 눌려집니다.
- 플렉스엔드- 요소가 줄의 끝까지 눌려졌습니다.
- 센터- 요소가 선의 중앙에 정렬됩니다.
기준선- 요소가 텍스트 기준선에 정렬됩니다.
일반 행에 있는 요소의 순서(위치, 위치)를 변경할 수 있습니다.
기본값: 순서: 0
기본적으로 요소의 순서는 0이며 HTML 코드에 나타나는 순서와 행 방향에 따라 배치됩니다. 그러나 order 속성의 값을 변경하면 요소는 -1 0 1 2 3 ... 값 순서로 정렬됩니다. 예를 들어 요소 중 하나에 대해 order: 1을 지정하면 모든 0이 먼저 표시되고 그 다음에는 1이 있는 요소가 표시됩니다.
예를 들어 이 방법을 사용하면 나머지 요소나 HTML 코드의 이동 방향을 변경하지 않고도 첫 번째 요소를 끝으로 이동할 수 있습니다.
노트
플렉스 기준과 너비의 차이점은 무엇입니까?
다음은 flex-basis와 너비/높이의 중요한 차이점입니다.
- flex 속성을 사용할 경우 3가지 값(flex-grow/flex-shrink/flex-basis)을 합쳐서 간략하게 작성할 수 있지만, width 성장이나 축소를 위해서는 별도로 작성해야 합니다. 예: flex:0 0 50% == 너비:50%; 플렉스 축소:0; . 때로는 불편할 때도 있습니다.
flex-basis는 주축에서만 작동합니다. 즉, flex-direction:row flex-basis는 너비를 제어하고 flex-direction:column은 높이를 제어합니다. .
flex-basis는 flex 요소에만 적용됩니다. 이는 컨테이너에 대해 flex를 비활성화하면 이 속성이 아무런 영향을 미치지 않는다는 것을 의미합니다.
절대 컨테이너 요소는 플렉스 구성에 참여하지 않습니다... 즉, 플렉스 기반은 절대 위치:절대인 경우 컨테이너의 플렉스 요소에 영향을 주지 않습니다. 너비/높이를 지정해야 합니다.
가능하다면 여전히 flex-basis를 선호하세요. flex-basis가 적절하지 않은 경우에만 width를 사용하세요.
flex-basis와 width의 차이점 - 버그인가요 아니면 기능인가요?
플렉스 요소 내부의 콘텐츠는 이를 밀어내고 그 이상으로 이동할 수 없습니다. 그러나 flex-basis 대신 width 또는 max-width 를 사용하여 너비를 설정하면 flex 컨테이너 내부의 요소가 해당 컨테이너의 경계를 넘어 확장될 수 있습니다(때로는 이것이 정확히 원하는 동작입니다). 예:
Flex 레이아웃 예
예제 어디에도 브라우저 간 호환성을 위해 사용되는 접두사가 없습니다. CSS를 쉽게 읽을 수 있도록 이렇게 했습니다. 따라서 최신 버전의 Chrome 또는 Firefox에서 예시를 참조하세요.
#1 수직 및 수평 정렬을 사용한 간단한 예
가장 간단한 예부터 시작하겠습니다. 수직 및 수평 정렬을 동시에 모든 블록 높이에서, 고무에서도 가능합니다.
또는 내부에 블록이 없으면 다음과 같이 됩니다.
#1.2 플렉스 블록 요소 간의 분리(중단)
가장자리를 따라 컨테이너 요소를 배치하고 중단이 발생한 요소를 무작위로 선택하려면 margin-left:auto 또는 margin-right:auto 속성을 사용해야 합니다.
#2 Flex의 적응형 메뉴
페이지 최상단에 메뉴를 만들어 보겠습니다. 넓은 화면에서는 오른쪽에 있어야 합니다. 평균적으로 중앙에 정렬합니다. 그리고 작은 요소에서는 각 요소가 새 줄에 있어야 합니다.
#3 적응형 3열
이 예에서는 3개의 열을 빠르고 편리하게 만드는 방법을 보여줍니다. 열을 좁히면 2개, 1개가 됩니다.
이 작업은 미디어 규칙을 사용하지 않고도 수행할 수 있으며 모든 것이 유연하게 이루어집니다.
jsfiddle.net으로 이동하여 "결과" 섹션의 너비를 변경하세요.
#4 flex를 사용한 적응형 블록
하나는 크고 두 개는 작은 3개의 블록을 출력해야 한다고 가정해 보겠습니다. 동시에, 블록이 작은 화면에 적응하는 것이 필요합니다. 우리는하다:
jsfiddle.net으로 이동하여 "결과" 섹션의 너비를 변경하세요.
#5 유연성과 전환 기능이 있는 갤러리
이 예는 플렉스를 사용하여 사진으로 귀여운 아코디언을 얼마나 빨리 만들 수 있는지 보여줍니다. Flex의 전환 속성에 주의하세요.
#6 Flex to Flex(단지 예)
임무는 유연한 블록을 만드는 것입니다. 각 블록의 텍스트 시작 부분이 수평으로 같은 줄에 있도록 합니다. 저것들. 폭이 좁아질수록 블록의 높이는 커집니다. 이미지는 상단에 있어야 하고, 버튼은 항상 하단에 있어야 하며, 중앙의 텍스트는 하나의 수평선을 따라 시작해야 합니다.
이 문제를 해결하기 위해 블록 자체를 유연하게 늘리고 가능한 최대 너비로 설정합니다. 각 내부 블록은 회전된 축 flex-direction:column을 갖는 플렉스 구조이기도 합니다. 가운데(텍스트가 있는) 요소는 늘어납니다. flex-grow:1; 모든 여유 공간을 채우려면 이것이 결과를 얻는 방법입니다. 텍스트는 한 줄로 시작됩니다...
더 많은 예시
브라우저 지원 - 98.3%
물론 완전한 지원은 없지만 모든 최신 브라우저는 Flexbox 디자인을 지원합니다. 일부는 여전히 접두사가 필요합니다. 실제 상황을 보려면 caniuse.com을 살펴보고 오늘날 사용되는 브라우저의 96.3%가 접두어 없이 작동하고 98.3%가 접두어를 사용하는 것을 확인하세요. 이는 Flexbox를 자신있게 사용하는 데 탁월한 지표입니다.
오늘(2019년 6월) 어떤 접두사가 관련되어 있는지 확인하기 위해 다음과 같은 모든 flex 규칙의 예를 제공하겠습니다. 필요한 접두사 포함:
/* 컨테이너 */ .flex ( 디스플레이:-webkit-box; 디스플레이:-ms-flexbox; 디스플레이:flex; 디스플레이:-webkit-inline-box; 디스플레이:-ms-inline-flexbox; 디스플레이:inline-flex; -webkit-box-orient:vertical; -ms-flex-wrap:wrap; -webkit-box-pack:justify; :justify; align-content:space-around; ) /* 요소 */ .flex-item ( -webkit-box-flex:1; -ms-flex-긍정적:1; flex-grow:1; -ms -flex- negative:2; -ms-flex-preferred-size:100px; -webkit-box-ordinal-group; :3; -ms-플렉스-순서:2);
접두사가 있는 속성이 원래 속성보다 앞에 오는 것이 더 좋습니다.
이 목록에는 (caniuse에 따르면) 오늘날 불필요한 접두사가 포함되어 있지 않지만 일반적으로 더 많은 접두사가 있습니다.
크롬 | 원정 여행 | 파이어폭스 | 오페라 | 즉. | 기계적 인조 인간 | iOS |
---|---|---|---|---|---|---|
20-(구) | 3.1+ (이전) | 2-21 (구) | 10(트위너) | 2.1+ (이전) | 3.2+ (이전) | |
21+ (신규) | 6.1+(신규) | 22+ (신규) | 12.1+(신규) | 11+ (신규) | 4.4+ (신규) | 7.1+(신규) |
- (신규) - 새로운 구문: display: flex; .
- (tweener) - 2011년의 오래된 비공식 구문: display: flexbox; .
- (이전) - 2009년의 이전 구문: display: box;
동영상
글쎄, 비디오를 잊지 마세요. 때로는 흥미롭고 이해하기 쉽습니다. 다음은 몇 가지 인기 있는 것입니다.
Flex에 대한 유용한 링크
flexboxfroggy.com - Flexbox 교육용 게임.
Flexplorer는 시각적인 플렉스 코드 빌더입니다.