flex box in css
<!--basic--flex--layout-->
<html>
<head>
<style>
.parent{
display: flex or inline-flex;
flex-direction: row or column;
flex-wrap: wrap or wrap-reverse;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-1"></div>
.
.
.
</div>
</body>
</html>display flex property
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}flex property in css
The flex property is a shorthand property for:
flex-grow
flex-shrink
flex-basisCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
