Percobaan pertama dengan flexbox berfokus memahami axis dan flex-direction

flexbox-pertama-axis.md

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

style.scss

$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)
}