12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- .u-flex {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- /* 换行 */
- .u-flex-wrap {
- flex-wrap: wrap;
- }
- /* 不换行 */
- .u-flex-nowrap {
- flex-wrap: nowrap;
- }
- /* 垂直居中 */
- .u-col-center {
- align-items: center;
- }
- /* 顶部对齐 */
- .u-col-top {
- align-items: flex-start;
- }
- /* 底部对齐 */
- .u-col-bottom {
- align-items: flex-end;
- }
- /* 左边对齐 */
- .u-row-left {
- justify-content: flex-start;
- }
- /* 水平居中 */
- .u-row-center {
- justify-content: center;
- }
- /* 右边对齐 */
- .u-row-right {
- justify-content: flex-end;
- }
- /* 水平两端对齐,项目之间的间隔都相等 */
- .u-row-between {
- justify-content: space-between;
- }
- /* 水平每个项目两侧的间隔相等,所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
- .u-row-around {
- justify-content: space-around;
- }
|