Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Percobaan pertama dengan flexbox berfokus memahami axis dan flex-direction

Flexbox

Percobaan pertama bermain sama flexbox. Pertama-tama, fokus memahami axis dulu.

Note: Perhatikan markup HTML dan konten hasil render.

Demo

flow-direction

row

row-reverse

flow-direction

flow-direction

column

column-reverse

flow-direction

$aqua: #7FDBFF;
$navy: #001f3f;
html {
font-family: sans-serif;
font-size: 16px;
}
.bg {
&-aqua { background-color: $aqua; }
&-navy { background-color: $navy; color: #fff;}
}
div {
margin: 1rem;
}
p {
font-size: 1.5rem;
text-align: center;
flex: 1;
margin: 0;
}
@mixin flex($direction) {
display: flex;
flex-direction: $direction;
}
.row {
@include flex(row)
}
.row-reverse {
@include flex(row-reverse)
}
.column {
@include flex(column)
}
.column-reverse {
@include flex(column-reverse)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.