布局容器
固定页面:.page

打开一个覆盖在 body 之上的固定的容器,并拥有页面背景色,自动允许垂直滚动多余的内容。

显示固定页面

内容:.container

Container 拥有左右内边距,宽度会随着页面宽度变化,但会限定最大宽度以确保内容更易于阅读,当其宽度小于父容器宽度的时会自动居中显示。

.container 添加 .fluid 会得到一个液态化的内容容器,其宽度永远为100%。

提示当前页面使用的 .container

定位

Positions:

.dock     {position: absolute!important;}
.affix    {position: fixed!important;}
.relative {position: relative!important;}
.static   {position: static!important;}

定位的方向辅助类,可以与 .affix.dock 配合使用:

.dock-top    {bottom: auto;}
.dock-bottom {top: auto;}
.dock-left   {right: auto;}
.dock-right  {left: auto;}

.dock-top.dock-bottom.affix 一起使用时,会自动在下方和上方为容器添加阴影绘制的边框。

弹性盒

以下辅助类应用于弹性盒容器:

// display
.flex        {display: flex!important;}
.flex-inline {display: inline-flex!important;}

// flex-direction
.flex-row       {flex-direction: row;}
.flex-column    {flex-direction: column;}
.row-reverse    {flex-direction: row-reverse;}
.column-reverse {flex-direction: column-reverse;}

// flex-wrap
.flex-wrap   {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}

// justify-content
.space-between  {justify-content: space-between;}
.justify-start  {justify-content: flex-start;}
.justify-end    {justify-content: flex-end;}
.justify-center {justify-content: center;}
.space-around {justify-content: space-around;}

// align-items align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
.stretch      {align-items: stretch;}
.align-start  {align-items: flex-start;}
.align-end    {align-items: flex-end;}
.align-middle {align-items: center;}

// 同时获得 .justify-center.align-middle 样式
.flex-middle {
  justify-content: center;
  align-items: center;
}

// align-content 属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。 
.content-start         {align-content: flex-start;}
.content-end           {align-content: flex-end;}
.content-center        {align-content: center;}
.content-space-between {align-content: space-between;}
.content-space-around  {align-content: space-around;}
.content-stretch       {align-content: stretch;}

.center-content 使得内部元素在垂直方向和水平方向居中。
.center-content {
  同时拥有 .flex, .justify-center, .align-middle
}

// 使用弹性盒布局,且内部元素自动调整大小并填充水平空间,通常与导航 .nav 一起使用
.justified {
  display: flex;
  flex-wrap: wrap;
  > * {flex: auto !important;}
  > .flex-none {flex: none!important}
}

以下辅助类应用于弹性盒子元素:

// order
.flex-first {order: -1;}
.flex-last  {order: 1;}

// flex
.flex-auto  {flex: auto;}
.flex-none  {flex: none;}
.flex-1     {flex: 1;}

// align-self
.selft-stretch      {align-self: stretch;}
.align-self-start   {align-self: flex-start;}
.align-self-end     {align-self: flex-end;}
.align-self-middle  {align-self: center;}

弹性盒布局参考:

滚动

以下辅助类可以用于控制容器内容超出时的滚动策略: