FlexGrid

Flexbox

flex布局的命名与Bootstrap栅格命名一致！

栅格系统

.col-(xs、sm、md、lg)-(1-12)

偏移

.offset-(xs、sm、md、lg)-(0-11)

							
<div class="container">
	<div class="row">
		<div class="col-xs-12 offset-xs-0"></div>
		<div class="col-xs-11 offset-xs-1"></div>
		<div class="col-xs-10 offset-xs-2"></div>
		<div class="col-xs-9 offset-xs-3"></div>
		<div class="col-xs-8 offset-xs-4"></div>
		<div class="col-xs-7 offset-xs-5"></div>
		<div class="col-xs-6 offset-xs-6"></div>
		<div class="col-xs-5 offset-xs-7"></div>
		<div class="col-xs-4 offset-xs-8"></div>
		<div class="col-xs-3 offset-xs-9"></div>
		<div class="col-xs-2 offset-xs-10"></div>
		<div class="col-xs-1 offset-xs-11"></div>
	</div>
</div>

响应式

小屏默认宽度为：col-xs-12

							
<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6"></div>
	</div>
</div>

扩展比例(flex-grow)

.grow-(xs、sm、md、lg)-(0-12)

							
<div class="container">
	<div class="row">
		<div class="grow-xs-1"></div>
		<div class="grow-xs-1"></div>
		<div class="grow-xs-1"></div>
		<div class="grow-xs-1"></div>
		<div class="grow-xs-1"></div>
	</div>
</div>

收缩比例(flex-shrink)

.shrink-(xs、sm、md、lg)-(0-12)

							
<div class="container">
	<div class="row">
		<div class="d-xs-f w-xs-100p mt-xs-30">
			<div class="col-xs-4 shrink-xs-1"></div>
			<div class="col-xs-4 shrink-xs-1"></div>
			<div class="col-xs-4 shrink-xs-2"></div>
			<div class="col-xs-4 shrink-xs-1"></div>
			<div class="col-xs-4 shrink-xs-1"></div>
		</div>
	</div>
</div>

主轴方向(flex-direction)

.fxd-(xs、sm、md、lg)-(row、rr、cn、cr)

							
<div class="container">
	<div class="row fxd-lg-row fxw-lg-nowrap fxd-md-rr fxd-sm-cn fxd-xs-cr">
		<div class="col-xs-4">1</div>
		<div class="col-xs-4">2</div>
		<div class="col-xs-4">3</div>
		<div class="col-xs-4">4</div>
	</div>
</div>

轴线(flex-wrap)

.fxw-(xs、sm、md、lg)-(nowrap、wrap、wr)

							
<div class="container">
	<div class="row fxd-lg-row fxw-lg-nowrap fxw-md-wrap fxw-sm-wr fxw-xs-wrap">
		<div class="col-xs-4">1</div>
		<div class="col-xs-4">2</div>
		<div class="col-xs-4">3</div>
		<div class="col-xs-4">4</div>
	</div>
</div>

排列顺序(order)

.order-(xs、sm、md、lg)-(first、last、[0-12])

											
<div class="container">
	<div class="row">
		<div class="col-lg-4">0</div>
		<div class="col-lg-4 col-md-12 mb-xs-20 order-lg-0 order-md-xs-first order-xs-last">1</div>
		<div class="col-lg-4">2</div>
	</div>
</div>

嵌套

.(container-fluid、container) > .row > .col-**-* > .row > .col-**-**

							
<div class="container">
	<div class="row">
		<div class="col-xs-4">
			<div class="row">
				<div class="col-xs-4"></div>
				<div class="col-xs-4"></div>
				<div class="col-xs-4"></div>
			</div>
		</div>
		<div class="col-xs-8">
			<div class="row">
				<div class="col-xs-3"></div>
				<div class="col-xs-3"></div>
				<div class="col-xs-3"></div>
				<div class="col-xs-3"></div>
			</div>
		</div>
	</div>
</div>

多列轴线对齐(justify-content)

.jc-(xs、sm、md、lg)-(start、center、end、between、around、evenly)

start

center

end

between

around

evenly

											
<div class="container">
	<div class="row jc-xs-center">
		<div class="col-xs-3">center</div>
		<div class="col-xs-3">center</div>
	</div>
</div>

多行轴线对齐(align-content)

.ac-(xs、sm、md、lg)-(top、middle、bottom、stretch、between、around、evenly)

top

middle

bottom

stretch

between

around

evenly

											
<div class="container">
	<div class="row h300 ac-xs-middle">
		<div class="col-xs-12">middle</div>
		<div class="col-xs-12">middle</div>
		<div class="col-xs-12">middle</div>
	</div>
</div>

交叉轴对齐(align-items)

.ai-(xs、sm、md、lg)-(top、middle、bottom、stretch、baseline)

top

middle

bottom

stretch

baseline

											
<div class="container">
	<div class="row ai-xs-middle">
		<div class="col-xs-4">middle</div>
		<div class="col-xs-4">middle</div>
		<div class="col-xs-4">middle</div>
	</div>
</div>

单独元素垂直对齐(align-self)

.as-(xs、sm、md、lg)-(top、middle、bottom、stretch、baseline)

top

middle

bottom

stretch

baseline

						
<div class="container">
	<div class="row ai-xs-middle">
		<div class="col-xs-4"></div>
		<div class="col-xs-4 as-xs-middle"></div>
		<div class="col-xs-4"></div>
	</div>
</div>

Grid-Layout

网格系统只适合用于重复性的布局，对于个性化较强的布局，建议自行使用 grid-template-areas 和 grid-area 来布局。

网格

列 (.cols-[xs、sm、md、lg]-[1-12])、行 (.rows-[xs、sm、md、lg]-[1-12])

					
<div class="grid cols-lg-12 cols-md-6 cols-sm-3 cols-xs-1 gap-xs-10">
		<div class="p-xs-20 bgc-red-7"></div>
		<div class="p-xs-20 bgc-pink-7"></div>
		<div class="p-xs-20 bgc-grape-7"></div>
		<div class="p-xs-20 bgc-violet-7"></div>
		<div class="p-xs-20 bgc-indigo-7"></div>
		<div class="p-xs-20 bgc-blue-7"></div>
		<div class="p-xs-20 bgc-cyan-7"></div>
		<div class="p-xs-20 bgc-teal-7"></div>
		<div class="p-xs-20 bgc-green-7"></div>
		<div class="p-xs-20 bgc-lime-7"></div>
		<div class="p-xs-20 bgc-yellow-7"></div>
		<div class="p-xs-20 bgc-orange-7"></div>
</div>

间距

全间隔（.gap-[xs、sm、md、lg]-[0-100]、（列间隔）.gapc-[xs、sm、md、lg]-[0-100]）、（行间隔）.gapr-[xs、sm、md、lg]-[0-100]

					
<div class="cols-sm-4 cols-xs-2 gapc-xs-30 gapr-xs-15">
		<div class="p-xs-20 bgc-blue-7"></div>
		<div class="p-xs-20 bgc-blue-7"></div>
		<div class="p-xs-20 bgc-blue-7"></div>
		<div class="p-xs-20 bgc-blue-7"></div>
		...
</div>

排序

x轴 (.xaim-[xs、sm、md、lg]-[1-12])、y轴 (.yaim-[xs、sm、md、lg]-[1-12])

											
<div class="grid cols-sm-5 cols-xs-3 gap-xs-10 mt-xs-30">
	<div class="bgc-green-7 xaim-sm-3 yaim-sm-1 xaim-xs-3 yaim-xs-3"></div>
	<div class="bgc-yellow-7 xaim-sm-3 yaim-sm-2 xaim-xs-2 yaim-xs-3"></div>
	<div class="bgc-red-7 xaim-sm-3 yaim-sm-3 xaim-xs-1 yaim-xs-3"></div>
	<div class="bgc-blue-7"></div>
	<div class="bgc-blue-7"></div>
	<div class="bgc-blue-7"></div>
	<div class="bgc-blue-7"></div>
	...
</div>

合并

列合并 (.mcol-[xs、sm、md、lg]-[1-12])、行合并 (.mrow-[xs、sm、md、lg]-[1-12])

											
<div class="grid cols-sm-4 rows-sm-3 cols-xs-3 rows-xs-4 gap-xs-10 mt-xs-30">
	<div class="bgc-red-7    p-xs-20 xaim-sm-1 yaim-sm-1 mcol-sm-3 mrow-sm-1 xaim-xs-1 yaim-xs-3 mcol-xs-2 mrow-xs-2"></div>
	<div class="bgc-yellow-7 p-xs-20 xaim-sm-2 yaim-sm-2 xaim-xs-3 yaim-xs-4"></div>
	<div class="bgc-violet-7 p-xs-20 xaim-sm-1 yaim-sm-2 mrow-sm-2 xaim-xs-1 yaim-xs-2"></div>
	<div class="bgc-orange-7 p-xs-20 xaim-sm-4 yaim-sm-1 mrow-sm-2 xaim-xs-3 yaim-xs-3"></div>
	<div class="bgc-green-7  p-xs-20 xaim-sm-3 yaim-sm-2 xaim-xs-1 yaim-xs-1"></div>
	<div class="bgc-blue-7   p-xs-20 xaim-sm-2 yaim-sm-3 mcol-sm-3 mrow-sm-1 xaim-xs-2 yaim-xs-1 mcol-xs-2 mrow-xs-2"></div>
</div>

网格自动流

.flow-[xs、sm、md、lg]-[row、column]、必须声明行列。


<div class="grid cols-lg-4 rows-lg-3 cols-xs-3 rows-xs-4 gap-xs-10 flow-lg-column flow-xs-row">
	<div class="bgc-blue-4 p-xs-20">1</div>
	<div class="bgc-blue-4 p-xs-20">2</div>
	<div class="bgc-blue-4 p-xs-20">3</div>
	<div class="bgc-blue-4 p-xs-20">4</div>
	...
</div>

网格嵌套

.grid > grid-fluid > grid-fluid ...

											
<div class="grid h300 cols-xs-3 gap-xs-10">
			<div class="grid-fluid cols-xs-2 gap-xs-10">
				<div class="grid-fluid cols-xs-2 gap-xs-10">
					<div class="bgc-blue-7"></div>
					<div class="bgc-blue-7"></div>
					<div class="bgc-blue-7"></div>
					<div class="bgc-blue-7"></div>
				</div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
			</div>
			<div class="grid-fluid cols-xs-3 gap-xs-10">
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				...
			</div>
			<div class="grid-fluid cols-xs-4 gap-xs-10">
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				<div class="bgc-blue-7"></div>
				...
			</div>
</div>

网格嵌套对齐 justify-content 配合 align-content 使用

											
<div class="grid h200 cols-xs-2 gap-xs-10">
	<div class="grid-fluid jc-xs-center ac-xs-middle">
		<div class="grid-fluid cols-xs-2 gap-xs-10">
			<div class="bgc-blue-4 p-xs-20"></div>
			<div class="bgc-blue-4 p-xs-20"></div>
			<div class="bgc-blue-4 p-xs-20"></div>
			<div class="bgc-blue-4 p-xs-20"></div>
		</div>
	</div>
	...
</div>

justify-content 与 align-content 的 space-evenly 属性使用时需要定义父元素与内元素的高宽，才能均匀的平分间距。


<div class="grid h300 mt-xs-30 jc-xs-evenly ac-xs-evenly" style="grid-template-columns: repeat(4, 20%); grid-template-rows: repeat(2, 20%);">
			<div class="bgc-blue-4"></div>
			<div class="bgc-blue-4"></div>
			<div class="bgc-blue-4"></div>
			...
</div>

网格交叉轴元素对齐 justify-items 配合 align-items 使用

.ji-(xs、sm、md、lg)-(start、center、end、stretch)


<div class="grid h300 cols-xs-4 gap-xs-10">
	<div class="grid-fluid cols-xs-2 gap-xs-10 ji-xs-start ai-xs-middle">
		<div class="bgc-blue-4 p-xs-30"></div>
		<div class="bgc-blue-4 p-xs-30"></div>
		<div class="bgc-blue-4 p-xs-30"></div>
		<div class="bgc-blue-4 p-xs-30"></div>
	</div>
	...
</div>

网格单独元素对齐 justify-self 配合 align-self 使用

.js-(xs、sm、md、lg)-(start、center、end、stretch)


<div class="grid h300 cols-xs-4 gap-xs-10 mt-xs-30">
	<div class="grid-fluid bgc-blue-7">
		<div class="bgc-blue-4 p-xs-30 js-xs-start as-xs-middle"></div>
	</div>
	...
</div>

媒体查询

在 src/static/sass/flexgrid.scss 文件中修改所需的参数值了解其他响应式属性

Media Query

标示

rem方案

min-width: 751px

min-width: 992px

min-width: 1200px