flex布局css大全(各属性排列组合)

css中的flex布局非常好用, 可以方便的排列元素, 具体用法可以参考阮一峰老师的语法讲解

 为了方便使用flex布局, 我用程序生成了一份各种情况的排列组合如下:

举例:

① "flex_row_nowrap_left_top" 表示: 子元素横向排列, 从父元素的左边开始, 沿着顶部排列, 超过父级宽度不换行

② "flex_row_nowrap_center_center" 表示上下左右居中, 不换行

.flex_row_nowrap_left_top {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start;}
.flex_row_nowrap_left_bottom {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end;}
.flex_row_nowrap_left_center {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.flex_row_nowrap_left_stretch {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;}
.flex_row_nowrap_left_baseline {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: baseline;}
.flex_row_nowrap_right_top {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: flex-start;}
.flex_row_nowrap_right_bottom {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: flex-end;}
.flex_row_nowrap_right_center {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center;}
.flex_row_nowrap_right_stretch {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: stretch;}
.flex_row_nowrap_right_baseline {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: baseline;}
.flex_row_nowrap_center_top {display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start;}
.flex_row_nowrap_center_bottom {display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end;}
.flex_row_nowrap_center_center {display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
.flex_row_nowrap_center_stretch {display: flex; flex-flow: row nowrap; justify-content: center; align-items: stretch;}
.flex_row_nowrap_center_baseline {display: flex; flex-flow: row nowrap; justify-content: center; align-items: baseline;}
.flex_row_nowrap_around_top {display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start;}
.flex_row_nowrap_around_bottom {display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-end;}
.flex_row_nowrap_around_center {display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center;}
.flex_row_nowrap_around_stretch {display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: stretch;}
.flex_row_nowrap_around_baseline {display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: baseline;}
.flex_row_nowrap_between_top {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start;}
.flex_row_nowrap_between_bottom {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end;}
.flex_row_nowrap_between_center {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.flex_row_nowrap_between_stretch {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch;}
.flex_row_nowrap_between_baseline {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: baseline;}
.flex_row_wrap_left_top {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;}
.flex_row_wrap_left_bottom {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-end;}
.flex_row_wrap_left_center {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center;}
.flex_row_wrap_left_stretch {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch;}
.flex_row_wrap_left_baseline {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: baseline;}
.flex_row_wrap_right_top {display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: flex-start;}
.flex_row_wrap_right_bottom {display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: flex-end;}
.flex_row_wrap_right_center {display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center;}
.flex_row_wrap_right_stretch {display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: stretch;}
.flex_row_wrap_right_baseline {display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: baseline;}
.flex_row_wrap_center_top {display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start;}
.flex_row_wrap_center_bottom {display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-end;}
.flex_row_wrap_center_center {display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.flex_row_wrap_center_stretch {display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch;}
.flex_row_wrap_center_baseline {display: flex; flex-flow: row wrap; justify-content: center; align-items: baseline;}
.flex_row_wrap_around_top {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start;}
.flex_row_wrap_around_bottom {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-end;}
.flex_row_wrap_around_center {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center;}
.flex_row_wrap_around_stretch {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: stretch;}
.flex_row_wrap_around_baseline {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: baseline;}
.flex_row_wrap_between_top {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;}
.flex_row_wrap_between_bottom {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end;}
.flex_row_wrap_between_center {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.flex_row_wrap_between_stretch {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch;}
.flex_row_wrap_between_baseline {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline;}
.flex_row_rewrap_left_top {display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: flex-start;}
.flex_row_rewrap_left_bottom {display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: flex-end;}
.flex_row_rewrap_left_center {display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: center;}
.flex_row_rewrap_left_stretch {display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: stretch;}
.flex_row_rewrap_left_baseline {display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: baseline;}
.flex_row_rewrap_right_top {display: flex; flex-flow: row wrap-reverse; justify-content: flex-end; align-items: flex-start;}
.flex_row_rewrap_right_bottom {display: flex; flex-flow: row wrap-reverse; justify-content: flex-end; align-items: flex-end;}
.flex_row_rewrap_right_center {display: flex; flex-flow: row wrap-reverse; justify-content: flex-end; align-items: center;}
.flex_row_rewrap_right_stretch {display: flex; flex-flow: row wrap-reverse; justify-content: flex-end; align-items: stretch;}
.flex_row_rewrap_right_baseline {display: flex; flex-flow: row wrap-reverse; justify-content: flex-end; align-items: baseline;}
.flex_row_rewrap_center_top {display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: flex-start;}
.flex_row_rewrap_center_bottom {display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: flex-end;}
.flex_row_rewrap_center_center {display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: center;} /*上下左右居中, 横向排列*/
.flex_row_rewrap_center_stretch {display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: stretch;}
.flex_row_rewrap_center_baseline {display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: baseline;}
.flex_row_rewrap_around_top {display: flex; flex-flow: row wrap-reverse; justify-content: space-around; align-items: flex-start;}
.flex_row_rewrap_around_bottom {display: flex; flex-flow: row wrap-reverse; justify-content: space-around; align-items: flex-end;}
.flex_row_rewrap_around_center {display: flex; flex-flow: row wrap-reverse; justify-content: space-around; align-items: center;}
.flex_row_rewrap_around_stretch {display: flex; flex-flow: row wrap-reverse; justify-content: space-around; align-items: stretch;}
.flex_row_rewrap_around_baseline {display: flex; flex-flow: row wrap-reverse; justify-content: space-around; align-items: baseline;}
.flex_row_rewrap_between_top {display: flex; flex-flow: row wrap-reverse; justify-content: space-between; align-items: flex-start;}
.flex_row_rewrap_between_bottom {display: flex; flex-flow: row wrap-reverse; justify-content: space-between; align-items: flex-end;}
.flex_row_rewrap_between_center {display: flex; flex-flow: row wrap-reverse; justify-content: space-between; align-items: center;}
.flex_row_rewrap_between_stretch {display: flex; flex-flow: row wrap-reverse; justify-content: space-between; align-items: stretch;}
.flex_row_rewrap_between_baseline {display: flex; flex-flow: row wrap-reverse; justify-content: space-between; align-items: baseline;}
.flex_col_nowrap_top_left {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start;}
.flex_col_nowrap_top_right {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;}
.flex_col_nowrap_top_center {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;}
.flex_col_nowrap_top_stretch {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch;}
.flex_col_nowrap_top_baseline {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: baseline;}
.flex_col_nowrap_bottom_left {display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-start;}
.flex_col_nowrap_bottom_right {display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-end;}
.flex_col_nowrap_bottom_center {display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center;}
.flex_col_nowrap_bottom_stretch {display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: stretch;}
.flex_col_nowrap_bottom_baseline {display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: baseline;}
.flex_col_nowrap_center_left {display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start;}
.flex_col_nowrap_center_right {display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end;}
.flex_col_nowrap_center_center {display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;} /*上下左右居中, 竖向排列*/
.flex_col_nowrap_center_stretch {display: flex; flex-flow: column nowrap; justify-content: center; align-items: stretch;}
.flex_col_nowrap_center_baseline {display: flex; flex-flow: column nowrap; justify-content: center; align-items: baseline;}
.flex_col_nowrap_around_left {display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: flex-start;}
.flex_col_nowrap_around_right {display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: flex-end;}
.flex_col_nowrap_around_center {display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center;}
.flex_col_nowrap_around_stretch {display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: stretch;}
.flex_col_nowrap_around_baseline {display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: baseline;}
.flex_col_nowrap_between_left {display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start;}
.flex_col_nowrap_between_right {display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-end;}
.flex_col_nowrap_between_center {display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center;}
.flex_col_nowrap_between_stretch {display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: stretch;}
.flex_col_nowrap_between_baseline {display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: baseline;}
.flex_col_wrap_top_left {display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start;}
.flex_col_wrap_top_right {display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-end;}
.flex_col_wrap_top_center {display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center;}
.flex_col_wrap_top_stretch {display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: stretch;}
.flex_col_wrap_top_baseline {display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: baseline;}
.flex_col_wrap_bottom_left {display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: flex-start;}
.flex_col_wrap_bottom_right {display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: flex-end;}
.flex_col_wrap_bottom_center {display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: center;}
.flex_col_wrap_bottom_stretch {display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: stretch;}
.flex_col_wrap_bottom_baseline {display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: baseline;}
.flex_col_wrap_center_left {display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start;}
.flex_col_wrap_center_right {display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-end;}
.flex_col_wrap_center_center {display: flex; flex-flow: column wrap; justify-content: center; align-items: center;}
.flex_col_wrap_center_stretch {display: flex; flex-flow: column wrap; justify-content: center; align-items: stretch;}
.flex_col_wrap_center_baseline {display: flex; flex-flow: column wrap; justify-content: center; align-items: baseline;}
.flex_col_wrap_around_left {display: flex; flex-flow: column wrap; justify-content: space-around; align-items: flex-start;}
.flex_col_wrap_around_right {display: flex; flex-flow: column wrap; justify-content: space-around; align-items: flex-end;}
.flex_col_wrap_around_center {display: flex; flex-flow: column wrap; justify-content: space-around; align-items: center;}
.flex_col_wrap_around_stretch {display: flex; flex-flow: column wrap; justify-content: space-around; align-items: stretch;}
.flex_col_wrap_around_baseline {display: flex; flex-flow: column wrap; justify-content: space-around; align-items: baseline;}
.flex_col_wrap_between_left {display: flex; flex-flow: column wrap; justify-content: space-between; align-items: flex-start;}
.flex_col_wrap_between_right {display: flex; flex-flow: column wrap; justify-content: space-between; align-items: flex-end;}
.flex_col_wrap_between_center {display: flex; flex-flow: column wrap; justify-content: space-between; align-items: center;}
.flex_col_wrap_between_stretch {display: flex; flex-flow: column wrap; justify-content: space-between; align-items: stretch;}
.flex_col_wrap_between_baseline {display: flex; flex-flow: column wrap; justify-content: space-between; align-items: baseline;}
.flex_col_rewrap_top_left {display: flex; flex-flow: column wrap-reverse; justify-content: flex-start; align-items: flex-start;}
.flex_col_rewrap_top_right {display: flex; flex-flow: column wrap-reverse; justify-content: flex-start; align-items: flex-end;}
.flex_col_rewrap_top_center {display: flex; flex-flow: column wrap-reverse; justify-content: flex-start; align-items: center;}
.flex_col_rewrap_top_stretch {display: flex; flex-flow: column wrap-reverse; justify-content: flex-start; align-items: stretch;}
.flex_col_rewrap_top_baseline {display: flex; flex-flow: column wrap-reverse; justify-content: flex-start; align-items: baseline;}
.flex_col_rewrap_bottom_left {display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: flex-start;}
.flex_col_rewrap_bottom_right {display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: flex-end;}
.flex_col_rewrap_bottom_center {display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: center;}
.flex_col_rewrap_bottom_stretch {display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: stretch;}
.flex_col_rewrap_bottom_baseline {display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: baseline;}
.flex_col_rewrap_center_left {display: flex; flex-flow: column wrap-reverse; justify-content: center; align-items: flex-start;}
.flex_col_rewrap_center_right {display: flex; flex-flow: column wrap-reverse; justify-content: center; align-items: flex-end;}
.flex_col_rewrap_center_center {display: flex; flex-flow: column wrap-reverse; justify-content: center; align-items: center;}
.flex_col_rewrap_center_stretch {display: flex; flex-flow: column wrap-reverse; justify-content: center; align-items: stretch;}
.flex_col_rewrap_center_baseline {display: flex; flex-flow: column wrap-reverse; justify-content: center; align-items: baseline;}
.flex_col_rewrap_around_left {display: flex; flex-flow: column wrap-reverse; justify-content: space-around; align-items: flex-start;}
.flex_col_rewrap_around_right {display: flex; flex-flow: column wrap-reverse; justify-content: space-around; align-items: flex-end;}
.flex_col_rewrap_around_center {display: flex; flex-flow: column wrap-reverse; justify-content: space-around; align-items: center;}
.flex_col_rewrap_around_stretch {display: flex; flex-flow: column wrap-reverse; justify-content: space-around; align-items: stretch;}
.flex_col_rewrap_around_baseline {display: flex; flex-flow: column wrap-reverse; justify-content: space-around; align-items: baseline;}
.flex_col_rewrap_between_left {display: flex; flex-flow: column wrap-reverse; justify-content: space-between; align-items: flex-start;}
.flex_col_rewrap_between_right {display: flex; flex-flow: column wrap-reverse; justify-content: space-between; align-items: flex-end;}
.flex_col_rewrap_between_center {display: flex; flex-flow: column wrap-reverse; justify-content: space-between; align-items: center;}
.flex_col_rewrap_between_stretch {display: flex; flex-flow: column wrap-reverse; justify-content: space-between; align-items: stretch;}
.flex_col_rewrap_between_baseline {display: flex; flex-flow: column wrap-reverse; justify-content: space-between; align-items: baseline;}