@charset "utf-8";

:root {
	--朋字形-gap: 1em;
	--亚字形-left-sidebar-min-width: 150px;
	--亚字形-left-sidebar-max-width: 20%;
	--亚字形-right-sidebar-min-width: 150px;
	--亚字形-right-sidebar-max-width: 20%;
	--亚字形-gap: 1em;
	--叵字形-left-sidebar-min-width: 150px;
	--叵字形-left-sidebar-max-width: 20%;
	--叵字形-right-sidebar-min-width: 150px;
	--叵字形-right-sidebar-max-width: 20%;
	--叵字形-gap: 1em;
	--反叵字形-left-sidebar-min-width: 150px;
	--反叵字形-left-sidebar-max-width: 20%;
	--反叵字形-right-sidebar-min-width: 150px;
	--反叵字形-right-sidebar-max-width: 20%;
	--反叵字形-gap: 1em;
	--目字形-gap: 1em;
}

/*============================flex布局===========================*/
.flex {display: flex;}

.inline-flex, .flex.inline {display: inline-flex;}

.flex.vertical, .inline-flex.vertical {
	flex-direction: column;
}

/*堆叠：从下部开始向上堆*/
.flex.stack, .inline-flex.stack {flex-direction: column-reverse;}

.flex.single-line, .inline-flex.single-line {flex-wrap: nowrap;}

.flex.multi-line, .inline-flex.multi-line {flex-wrap: wrap;}

/*----------线路之间（align-content）(lines带有语义，仅适用于flex布局）----------*/
/*所有线路都拉伸膨胀，充满空间*/
.lines-stretch {flex-wrap: wrap; align-content: stretch;}

/*所有线路都拥到第一条线路这边*/
.lines-near-start {flex-wrap: wrap; align-content: start;}

/*所有线路都退到最后一条线路这边*/
.lines-near-end {flex-wrap: wrap; align-content: end;}

/*所有线路都挤在中间*/
.lines-near-center {flex-wrap: wrap; align-content: center;}

/*线路互斥（社恐），即线路互相之间距离尽量远*/
.lines-space-between, .lines-mutex, .lines-social-phobia {flex-wrap: wrap; align-content: space-between;}

/*线路不熟，即线路互相之间保持距离但又不极端排斥*/
.lines-space-around, .flex.lines-unfamiliar {flex-wrap: wrap; align-content: space-around;}

/*线路不熟但比较友好*/
.lines-space-evenly, .flex.lines-friendly {flex-wrap: wrap; align-content: space-evenly;}

/*-----------项目本身------------*/
/*项目独占/垄断 一行*/
.flex > .item.monopoly, .inline-flex > .item.monopoly {flex-basis: 100%;}

/*项目在主轴方向上拉伸/压缩*/
.flex > .item.stretch, .inline-flex > .item.stretch {flex: 1 1 auto;}

/*项目禁止压缩*/
.flex > .item.no-shrink, .inline-flex > .item.no-shrink {flex-shrink: 0;}

/*===============================grid布局===============================*/
.grid {display: grid;}

.grid.inline, .inline-grid {display: inline-grid}

/* 不一定真的能独占一行/列。如果另有项目也安排在同一行/列，两者会堆叠 */
.grid > .one-row.item, .inline-grid > .one-row.item {grid-column: 1 / -1;}

.grid > .one-column.item, .inline-grid > .one-column.item {grid-row: 1 / -1;}

.grid.朋字形, .inline-grid.朋字形 {
	grid-template-columns: 50% 50%;
	grid-template-areas: 'left right';
	gap: var(--朋字形-gap);
}

/* “亚字形”布局，上部导航栏，底部页脚，中间有左右侧栏，中部是主要内容 */
.grid.亚字形, .inline-grid.亚字形 {
	grid-template-rows:
		auto    /* Header 高度自适应内容 */
		1fr     /* 主内容区填充剩余垂直空间 */
		auto; /* Footer 高度自适应 */
	grid-template-columns:
		minmax(var(--亚字形-left-sidebar-min-width), var(--亚字形-left-sidebar-max-width))   /* 左侧：最小150px，最大占20%宽度 */
		1fr                  /* 中间：自适应剩余空间 */
		minmax(var(--亚字形-right-sidebar-min-width), var(--亚字形-right-sidebar-max-width)); /* 右侧：同左侧 */
	grid-template-areas:
		'header header header'
		'left-sidebar main right-sidebar'
		'footer footer footer';
	gap: var(--亚字形-gap);
}

/* “叵字形”布局，上部导航栏，底部页脚，中间左侧栏宽度固定，右侧主要内容自适应 */
.grid.叵字形, .inline-grid.叵字形 {
	grid-template-rows:
		auto    /* Header 高度自适应内容 */
		1fr     /* 主内容区填充剩余垂直空间 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: minmax(var(--叵字形-left-sidebar-min-width), var(--叵字形-left-sidebar-max-width)) 1fr;
	grid-template-areas:
		'header header'
		'left-sidebar main'
		'footer footer';
	gap: var(--叵字形-gap);
}

/* “反叵字形”布局，上部导航栏，底部页脚，中间右侧栏宽度固定，左侧主要内容自适应 */
.grid.反叵字形, .inline-grid.反叵字形 {
	grid-template-rows:
		auto    /* Header 高度自适应内容 */
		1fr     /* 主内容区填充剩余垂直空间 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: 1fr minmax(var(--反叵字形-right-sidebar-min-width), var(--反叵字形-right-sidebar-max-width));
	grid-template-areas:
				'header header'
				'main right-sidebar'
				'footer footer';
	gap: var(--反叵字形-gap);
}

/* “目字形”布局，上部导航栏，底部页脚 */
.grid.目字形, .inline-grid.目字形 {
	grid-template-rows:
		auto    /* Header 高度自适应内容 */
		1fr     /* 主内容区填充剩余垂直空间 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: 1fr;
	grid-template-areas:
		'header'
		'main'
		'footer';
	gap: var(--目字形-gap);
}

/*==========================================用于布局容器本身==========================================*/
/*----------项目之间（justify-content），适用于flex、grid布局里的项目----------*/
/*项目都拥到队伍前面/在主轴上靠前*/
.items-near-start-x {justify-content: start;}

/*项目都退到队伍后面/在主轴上靠后*/
.items-near-end-x {justify-content: end;}

/*项目都挤在队伍中间/在主轴上居中*/
.items-near-center-x {justify-content: center; text-align: center;}

/*项目互斥（社恐），即项目互相之间距离尽量远*/
.items-space-between, .items-mutex, .items-social-phobia {justify-content: space-between;}

/*项目不熟，即项目互相之间保持距离但又不极端排斥*/
.items-space-around, .items-unfamiliar {justify-content: space-around;}

/*项目不熟但比较友好*/
.items-space-evenly, .items-friendly {justify-content: space-evenly;}

/*----------项目在次轴方向（align-items），适用于flex、grid布局里的项目----------*/
/*项目在次轴方向上拉伸膨胀，充满空间*/
.items-stretch {align-items: stretch;}

/*项目垂直靠向开始的方向/在次轴上靠前*/
.items-near-start-y {align-items: start;}

/*项目垂直靠向结束的方向/在次轴上靠后*/
.items-near-end-y {align-items: end;}

/*项目垂直居中/在次轴上居中，像“册”字一样*/
.items-near-center-y, .items-like-册 {align-items: center;}

/*==========================================用于项目=========================================*/
/* 为防父元素没有使用.grid类之类，所以不使用 .grid > header ，直接设置grid-area。若父元素非display:grid也没事，会被浏览器忽略。下同 */
header {
	grid-area: header;
	grid-row: 1;
	grid-column: 1 / -1;
	flex: 1 1 100%;
}

footer {
	grid-area: footer;
	grid-row: -2;
	grid-column: 1 / -1;
	flex: 1 1 100%;
}

.left-sidebar {grid-area: left-sidebar;}

.right-sidebar {grid-area: right-sidebar;}

main, .main, .body {grid-area: main; flex: 1;}

.near-center {justify-content: center; align-items: center; text-align: center;}

.flexible.item {
	flex: 1 1 auto; /* 允许扩展和收缩 */
	align-self: stretch; /* 默认拉伸填满 */
	box-sizing: border-box; /* 包含内边距和边框 */
	min-width: 0; /* 防止内容溢出 */
	min-height: 0; /* 防止内容溢出 */
	will-change: flex-basis; /* 性能优化 */
	transition: flex-basis 0.2s ease;
}