/**
 * flex
 * flex-direction 指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
 * justify-content 定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
 * align-items 将所有直接子节点上的 align-self 值设置为一个组。align-self 设置项目在其包含块中在交叉轴方向上的对齐方式。
 */

/**
 * row
 */
.f_row-sta,
.f_row-sta-sta {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.f_row-sta-cen {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.f_row-sta-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

.f_row-cen,
.f_row-cen-sta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.f_row-cen-cen {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.f_row-cen-end {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.f_row-end,
.f_row-end-sta {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}

.f_row-end-cen {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.f_row-end-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

/**
 * space-between
 * 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
 */
.f_row-bet,
.f_row-bet-sta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.f_row-bet-cen {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.f_row-bet-end {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

/**
 * space-around
 * 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
 */
.f_row-aro,
.f_row-aro-sta {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.f_row-aro-cen {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.f_row-aro-end {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
}

/**
 * space-evenly
 * flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。
 */
.f_row-eve,
.f_row-eve-sta {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}

.f_row-eve-cen {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.f_row-eve-end {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}

/**
 * column
 */
.f_col-sta,
.f_col-sta-sta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.f_col-sta-cen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.f_col-sta-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.f_col-cen,
.f_col-cen-sta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.f_col-cen-cen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.f_col-cen-end {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.f_col-end,
.f_col-end-sta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.f_col-end-cen {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.f_col-end-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

/**
 * space-between
 * 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
 */
.f_col-bet,
.f_col-bet-sta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.f_col-bet-cen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.f_col-bet-end {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

/**
 * space-around
 * 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
 */
.f_col-aro,
.f_col-aro-sta {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.f_col-aro-cen {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.f_col-aro-end {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
}

/**
 * space-evenly
 * flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。
 */
.f_col-eve,
.f_col-eve-sta {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

.f_col-eve-cen {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.f_col-eve-end {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

/**
 * wrap
 */
.f_wrap {
    flex-wrap: wrap;
}

/**
 * flex-1
 */
.flex-1 {
    flex: 1;
}