CSS/SASS
[SCSS] flex mixin 만들기
알찬 퍼블리셔
2022. 8. 2. 13:57
728x90
반응형
참고
[CSS/CSS 기초] - flex 크로스 브라우징 / 호환성 이슈 해결 / 모든 브라우저 적용
@mixin flex-row($dir ,$align, $justify) {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
@if($dir == row){
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
@if($dir == column){
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@if($align == start){
-moz-align-items: flex-start;
align-items: flex-start;
}
@if($align == center){
-moz-align-items: center;
align-items: center;
}
@if($align == end){
-moz-align-items: flex-end;
align-items: flex-end;
}
@if($align == stretch) {
-moz-align-items: stretch;
align-items: stretch;
}
@if($justify == between){
-moz-justify-content: space-between;
justify-content: space-between;
}
@if($justify == center){
-moz-justify-content: center;
justify-content: center;
}
@if($justify == start){
-moz-justify-content: flex-start;
justify-content: flex-start;
}
@if($justify == end){
-moz-justify-content: flex-end;
justify-content: flex-end;
}
}
@mixin flex1(){
-ms-flex: 1;
flex: 1;
}
728x90
반응형