Flexbox 경험 학습 요약
- 高洛峰원래의
- 2017-03-22 14:55:171544검색
flex 구문
Flex 레이아웃을 채택하는 요소를 Flex 컨테이너(플렉스 컨테이너) 또는 줄여서 "컨테이너"라고 합니다. 모든 하위 요소는 자동으로 "항목"이라고 하는 Flex 항목(플렉스 항목)이라는 컨테이너 멤버가 됩니다.
컨테이너에는 기본적으로 가로 기본 축(기본 축)과 세로 교차 축이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 합니다. 크로스 엔드라고 불린다.
항목은 기본적으로 주축을 따라 정렬됩니다. 단일 프로젝트가 차지하는 주축 공간을 메인 사이즈, 단일 항목이 차지하는 교차축 공간을 크로스 사이즈라고 합니다.
컨테이너의 속성
다음 6가지 속성이 컨테이너에 설정됩니다.
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction: flex-direction 속성은 주축의 방향(즉, 항목이 배열되는 방향).
row(默认) | row-reverse | column | column-reverse
flex-wrap: 기본적으로 항목은 선(일명 "축")에 정렬됩니다. flex-wrap 속성은 한 축이 맞지 않는 경우 선을 감싸는 방법을 정의합니다.
nowrap(默认) | wrap | wrap-reverse
flex-flow: flex-flow 속성은 flex-direction 속성과 flex-wrap 속성의 축약형입니다. 기본값은 row nowrap
justify-content입니다. justify-content 속성이 정의되었습니다. 주축의 항목 정렬입니다.
flex-start | flex-end | center | space-between | space-around
align-items 속성: align-items 속성은 항목이 교차 축에 정렬되는 방식을 정의합니다.
flex-start | flex-end | center | baseline | stretch
align-content: align-content 속성은 교차축에서 여러 축의 정렬을 정의합니다. 항목에 축이 하나만 있는 경우 이 속성은 효과가 없습니다.
flex-start | flex-end | center | space-between | space-around | stretch
항목의 속성
다음 6가지 속성이 항목에 설정됩니다:
order flex-grow flex-shrink flex-basis flex align-self
order: order 속성 정의 항목이 정렬되는 순서입니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.
flex-grow: flex-grow 속성은 항목의 확대 비율을 정의합니다. 즉, 남은 공간이 있으면 확대되지 않습니다.
모든 항목의 flex-grow 속성이 1인 경우 남은 공간(있는 경우)을 균등하게 나눕니다. 한 항목의 flex-grow 속성이 2이고 다른 항목이 모두 1인 경우 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다.
flex-shrink: flex-shrink 속성은 항목의 축소 비율을 정의합니다. 즉, 공간이 부족하면 항목이 축소됩니다.
모든 항목의 flex-shrink 속성이 1일 경우 공간이 부족할 경우 비례하여 모두 축소됩니다. 한 항목의 flex-shrink 속성이 0이고 다른 항목이 1인 경우 전자는 공간이 부족해도 축소되지 않습니다.
flex-basis: flex-basis 속성은 초과 공간을 할당하기 전에 항목의 기본 크기를 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.
flex-basis: <length> | auto; /* default auto */
너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정하면 항목이 고정된 공간을 차지합니다.
flex: flex 속성은 flex-grow, flex-shrink 및 flex-basis의 약어입니다. 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.
이 속성에는 자동(1 1 자동)과 없음(0 0 자동)이라는 두 가지 바로가기 값이 있습니다.
세 가지 별도의 속성을 별도로 작성하는 대신 이 속성을 먼저 사용하는 것이 좋습니다. 브라우저가 관련 값을 추론하기 때문입니다.
align-self: align-self 속성을 사용하면 단일 항목을 다른 항목과 다르게 정렬할 수 있으며 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 가 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다.
align-self: auto | flex-start | flex-end | center | baseline | stretch
레이아웃
그리드 레이아웃
1 기본 그리드 레이아웃
가장 간단한 그리드 레이아웃은 균일한 분포입니다. 항목은 flex:1
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
2% 레이아웃
으로 설정할 수 있습니다. 특정 그리드의 너비는 고정된 비율이고 나머지 그리드는 나머지 공간을 균등하게 할당합니다.
너비 설정: 백분율; 또는 플렉스: 퍼센트가 필요한 항목의 경우 0 퍼센트, 자동으로 할당된 항목의 경우 플렉스 설정: 1
3 성배 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex 圣杯布局">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="HolyGrail">
<header>header</header>
<p class="HolyGrail-body">
<main class="HolyGrail-content">content</main>
<nav class="HolyGrail-nav">left nav</nav>
<aside class="HolyGrail-ads">right ad</aside>
</p>
<footer>footer</footer>
</body>
</html>
*{
margin: 0;
}
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
}
header,
footer {
flex: 0 0 40px;
background-color: #ccc;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: #0f0;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
background-color: #00f;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background-color: #f00;
}
데모 보기
작은 화면이라면 몸통의 세 기둥이 자동으로 수직으로 겹쳐지게 됩니다.
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
4 유동 레이아웃
각 행의 항목 수는 고정되어 있으며 자동으로 행으로 나누어집니다.
아아아아호환 가능
아아아아위 내용은 Flexbox 경험 학습 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!