下面是Scss文件
.flex{
display: flex;
}
/*
flex-grow属性
定义项目的放大比例，
默认为0，即如果存在剩余空间，也不放大。
*/
@for $i from 1 to 2{
.f-grow{
flex-grow: #{$i};
}
}
/*
justify-content属性
定义了项目在主轴上的对齐方式。
*/
$justifyList: (
f-start: flex-start,//左对齐
f-center: center,//居中对齐
f-end: flex-end ,//右对齐
f-between: space-between,//两端对齐
f-around: space-around//四周对齐
);
@each $key,$val in $justifyList {
.#{$key} {
justify-content: #{$val};
}
}
/*
flex-direction属性
子元素排列方向
*/
$directionList: row, // (默认) 水平方向，起点在左端
row-reverse, //水平方向，起点在右端
column, //垂直方向，起点在上沿
column-reverse; //垂直方向，起点在下沿
@each $item in $directionList {
.f-#{$item} {
flex-direction: #{$item};
}
}
/*
flex-wrap属性
子元素排列是否换行
*/
$wrapList: nowrap, //（默认)不换行。
wrap, //换行，第一行在上方。
wrap-reverse; //换行，第一行在下方。
@each $item in $wrapList {
.f-#{$item} {
flex-wrap: #{$item};
}
}
/*
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，
默认值为row nowrap。
*/
@each $item in $directionList {
@each $item2 in $wrapList {
.f-#{$item}-#{$item2}{
flex-wrap: #{$item};
flex-flow:$item $item2;
}
}
}
