use-on-demand/lib/sources/bootstrap/4.5.0/croped/bootstrap-grid.croped.flex.css

按需使用的代码工具仓库。

/**
 * 包含以下内容：
 *        1.flex
 *        2.justify-content
 *        3.align-items
 *        4.align-content
 *        5.align-self
 *
 * 去除的部分：
 *        1.和MediaQuery中，分辨率有关的衍生部分。
 *        2.和MediaQuery中，设备（如print）有关的衍生部分。
 */

.d-flex {
  display : flex !important;
}

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

.flex-fill {
  flex : 1 1 auto !important;
}


/*TIP 主轴方向*/
.flex-row {
  flex-direction : row !important;
}

.flex-column {
  flex-direction : column !important;
}

.flex-row-reverse {
  flex-direction : row-reverse !important;
}

.flex-column-reverse {
  flex-direction : column-reverse !important;
}

/*TIP 主轴距离占比*/
.flex-grow-0 {
  flex-grow : 0 !important;
}

.flex-grow-1 {
  flex-grow : 1 !important;
}

/*TIP 主轴对齐方式 */
.justify-content-start {
  justify-content : flex-start !important;
}

.justify-content-end {
  justify-content : flex-end !important;
}

.justify-content-center {
  justify-content : center !important;
}

.justify-content-between {
  justify-content : space-between !important;
}

.justify-content-around {
  justify-content : space-around !important;
}

.justify-content-evenly {
  justify-content : space-evenly !important;
}

/*TIP 侧轴对齐方式*/
.align-items-start {
  align-items : flex-start !important;
}

.align-items-end {
  align-items : flex-end !important;
}

.align-items-center {
  align-items : center !important;
}

.align-items-baseline {
  align-items : baseline !important;
}

.align-items-stretch {
  align-items : stretch !important;
}

/*TIP Flex容器内，整体位置微调？？？*/
.align-content-start {
  align-content : flex-start !important;
}

.align-content-end {
  align-content : flex-end !important;
}

.align-content-center {
  align-content : center !important;
}

.align-content-between {
  align-content : space-between !important;
}

.align-content-around {
  align-content : space-around !important;
}

.align-content-stretch {
  align-content : stretch !important;
}

/*TIP 单个元素，自己覆盖align-items的属性*/
.align-self-auto {
  align-self : auto !important;
}

.align-self-start {
  align-self : flex-start !important;
}

.align-self-end {
  align-self : flex-end !important;
}

.align-self-center {
  align-self : center !important;
}

.align-self-baseline {
  align-self : baseline !important;
}

.align-self-stretch {
  align-self : stretch !important;
}