/*flex语法参考: https://ruanyifeng.com/blog/2015/07/flex-grammar.html*/
/*以下是容器属性*/
.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;}

/*以下是子元素属性*/
.flex_grow_1{flex-grow: 1}