Skip to content

Instantly share code, notes, and snippets.

@cahyowhy

cahyowhy/css-flex-revisited

Last active November 5, 2019 06:44
Show Gist options
  • Save cahyowhy/bcd5aa5d9fdb6f13563c491161a2bbf4 to your computer and use it in GitHub Desktop.
Save cahyowhy/bcd5aa5d9fdb6f13563c491161a2bbf4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-flex-revisited
<!DOCTYPE html>
<html>
<head>
<title>Contoh Flexbox</title>
<style>
.fl-row {
display: flex;
flex-direction: row;
}
.fl-col {
display: flex;
flex-direction: column;
}
.fl-wrap {
flex-wrap: wrap;
}
.box-small {
padding: 6px;
width: 70px;
min-height: 70px;
background-color: white;
color: black;
font-size: 20px;
}
.box-small:nth-child(even) {
background-color: black;
color: white;
}
.box {
padding: 16px;
background-color: grey;
box-shadow: 3px 3px 5px #c4c4c4;
width: 300px;
min-height: 300px;
}
.fl-flex-1 {
flex: 1;
}
.fl-flex-2 {
flex: 2;
}
.fl-flex-3 {
flex: 3;
}
.jc {
justify-content: center;
}
.ac {
align-items: center;
}
.je {
justify-content: flex-end;
}
.ae {
align-items: flex-end;
}
.js {
justify-content: flex-start;
}
.as {
align-items: flex-start;
}
.p-color {
color: white;
font-size: 24px;
}
.p-color .box {
width: 450px;
}
.p-color p:first-child {
background-color: red;
}
.p-color p:last-child {
background-color: green;
}
</style>
</head>
<body>
<h1>Contoh flexbox (flexbox-row menampilkan secara horizontal (menyamping))</h1>
<div class="fl-row">
<div class="box">
<p>BOX 1</p>
</div>
<div class="box">
<p>BOX 2</p>
</div>
<div class="box">
<p>BOX 3</p>
</div>
</div>
<h1>Contoh flexbox (flexbox-col menampilkan secara vertical (menurun))</h1>
<div class="fl-col">
<div class="box">
<p>BOX 1</p>
</div>
<div class="box">
<p>BOX 2</p>
</div>
<div class="box">
<p>BOX 3</p>
</div>
</div>
<h1>Contoh flexbox dengan setiap item (box) nya dengan nilai flex = 1</h1>
<div class="fl-row">
<div class="box fl-flex-1">
<p>BOX 1</p>
</div>
<div class="box fl-flex-1">
<p>BOX 2</p>
</div>
<div class="box fl-flex-1">
<p>BOX 3</p>
</div>
</div>
<h1>Contoh flexbox dengan setiap item (box) nya dengan nilai flex bervariasi</h1>
<div class="fl-row">
<div class="box fl-flex-1">
<p>BOX 1</p>
</div>
<div class="box fl-flex-2">
<p>BOX 2</p>
</div>
<div class="box fl-flex-3">
<p>BOX 3</p>
</div>
</div>
<br>
<br>
<h1>Contoh flexbox row (penggunaan <i>align-items</i>)</h1>
<h2>
Align items akan meratakan item <i>berlawanan arah</i> dengan posisi flex saat ini. <br>
pada contoh dibawah align items digunakan untuk meratakan item berlawanan arah terhadap sumbu X. <br>
(dimana flex row, akan meratakan objek secara horizontal / menyamping) maka align items pada <br>
contoh ini digunakan untuk meratakan objek secara vertikal terhadap sumbu X flex-row
</h2>
<div class="fl-row p-color">
<div class="as box fl-row">
<p style="margin-right: 15px;">fl row. align items flex-start</p>
<p>BOX 1</p>
</div>
<div class="ac box fl-row">
<p style="margin-right: 15px;">fl row. align items center</p>
<p>BOX 2</p>
</div>
<div class="ae box fl-row">
<p style="margin-right: 15px;">fl row. align items flex-end</p>
<p>BOX 3</p>
</div>
</div>
<br>
<br>
<h1>Contoh flexbox row (penggunaan <i>justify-content</i>)</h1>
<h2>
justify-content digunakan untuk meratakan item terhadap sumbu saat ini (sumbu X)
</h2>
<div class="fl-row p-color">
<div class="js as box fl-row">
<p style="margin-right: 15px;">fl row. justify-content flex-start</p>
<p>BOX 1</p>
</div>
<div class="jc as box fl-row">
<p style="margin-right: 15px;">fl row. justify-content center</p>
<p>BOX 2</p>
</div>
<div class="je as box fl-row">
<p style="margin-right: 15px;">fl row. justify-content flex-end</p>
<p>BOX 3</p>
</div>
</div>
<br>
<br>
<h1>Contoh flexbox column (penggunaan <i>align-items</i>)</h1>
<h2>
Align items disini digunakan untuk meratakan item berlawanan arah terhadap sumbu Y <br>
(dimana fl column) akan meratakan objek secara vertical. maka align-items disini berfungsi <br>
untuk meratakan item secara horizontal
</h2>
<div class="fl-row p-color">
<div class="as box fl-col">
<p>fl col. align-items flex-start</p>
<p>BOX 1</p>
</div>
<div class="ac box fl-col">
<p>fl col. align-items center</p>
<p>BOX 2</p>
</div>
<div class="ae box fl-col">
<p>fl col. align-items flex-end</p>
<p>BOX 3</p>
</div>
</div>
<br>
<br>
<h1>Contoh flexbox column (penggunaan <i>justify-content</i>)</h1>
<h2>
justify-content digunakan untuk meratakan item terhadap sumbu saat ini (sumbu y)
</h2>
<div class="fl-row p-color">
<div class="js box fl-col">
<p>fl col. justify-content flex-start</p>
<p>BOX 1</p>
</div>
<div class="jc box fl-col">
<p>fl col. justify-content center</p>
<p>BOX 2</p>
</div>
<div class="je box fl-col">
<p>fl col. justify-content flex-end</p>
<p>BOX 3</p>
</div>
</div>
<br>
<br>
<h1>Contoh flexbox dengan property <i>flex-wrap: wrap;</i></h1>
<h2>
Digunakan untuk me <i>wrap</i> item didalamnya. Sehingga kita dapat dengan mudah <br>
mengatur sendiri lebar setiap item secara lebih spesifik. <br>
Apabila dalam satu baris lebarnya > dari widh lebar parent maka item selanjutnya <br>
otomatis akan `dipindah ke bawah`
</h2>
<div class="fl-row fl-wrap" style="width: 600px;">
<div class="box-small">1</div>
<div class="box-small">2</div>
<div class="box-small">3</div>
<div class="box-small">4</div>
<div class="box-small">5</div>
<div class="box-small">6</div>
<div class="box-small">7</div>
<div class="box-small">8</div>
<div class="box-small">9</div>
<div class="box-small">10</div>
<div class="box-small">11</div>
<div class="box-small">12</div>
<div class="box-small">13</div>
<div class="box-small">14</div>
<div class="box-small">15</div>
<div class="box-small">16</div>
<div class="box-small">17</div>
<div class="box-small">18</div>
<div class="box-small">19</div>
<div class="box-small">20</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment