기초 6 : 새로운 플렉스 그리드

Foundation 6의 Flex 그리드 : 강력한 Flexbox 기반 레이아웃 시스템

Foundation 6은 반응적이고 복잡한 웹 디자인을 만들기 위해 Flexbox의 힘을 활용하여 게임 변화 Flex 그리드를 소개합니다. 그러나이 고급 시스템에는 브라우저 호환성 고려 사항이 필요합니다. IE8 및 IE9와 같은 레거시 브라우저와 호환되지 않습니다

주요 기능 및 고려 사항 :

선택적 구성 요소 :

플렉스 그리드는 기본적으로 활성화되지 않습니다. 표준 그리드의 대체물로 설계되었으며 클래스 이름이 겹치기 때문에 동시에 사용할 수 없습니다. 강화 제어 : 요소 순서, 수평 및 수직 정렬 및 기타 레이아웃 측면을 쉽게 관리합니다. 세분화 제어를 위해 각각 고유 한 레이아웃을 갖춘 여러 그리드를 만듭니다.

브라우저 지원 :

Flexbox에 대한 의존은 최신 브라우저와의 호환성을 의미합니다. 레거시 브라우저 지원은 표준 그리드를 고수해야합니다
• 플렉스 그리드 구현 : SASS 사용자의 경우 : : 를 수정하십시오 .row 사용자 정의 빌드의 경우 사용자 정의 프로세스 중에 Flex 그리드를 선택하십시오. .column.
• 기본 사용 : 간단한 3 열 레이아웃 :
요소 순서 :
• Flexbox는 요소 재정 점을 단순화합니다. 장치 별 순서 : 에 또는 를 사용하십시오 장치 별 순서 :

정렬 : , 등과 같은 클래스를 사용하여 또는 개별 요소에 적용되는 클래스를 사용하여 컨텐츠를 쉽게 중심으로합니다. 예를 들어, 균등 한 간격 메뉴 항목 :

수정 된 SASS 그리드 시스템 : app.scss Foundation 6은 코어 그리드 믹스 인을 향상시켜 다양한 열 계산으로 여러 그리드 정의를 허용합니다. 이를 통해 고도로 사용자 정의 된 레이아웃이 가능합니다

// @include foundation-grid;
@include foundation-flex-grid;

결론 :

Foundation 6의 Flex Grid는 전임자에 비해 탁월한 유연성과 레이아웃에 대한 탁월한 유연성과 제어를 제공합니다. 레거시 브라우저 지원이 제약이 아닌 경우 간소화 된 개발 및 적응 가능한 설계에 권장되는 접근 방식입니다. Enhanced Sass Grid Mixin은 개발자에게 고도로 맞춤형 그리드 시스템을 제공 할 수 있습니다.

위 내용은 기초 6 : 새로운 플렉스 그리드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!