Flexbox (Flexible Box) adalah fitur CSS3 yang mempermudah kita mendistribusi ruang kosong & mengatur ukuran elemen-elemen dalam sebuah kontainer. Jadi fungsi utamanya adalah untuk mempermudah pembuatan kontainer yang ketika ukurannya berubah, elemen di dalamnya bisa otomatis menyesuaikan ukuran & posisi.

[pastacode lang=”markup” message=”index.html” highlight=”” provider=”manual”]

  
    
  
  
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
  

[/pastacode]

Untuk bikin flexbox kita cukup pakai display:flex.

[pastacode lang=”css” message=”index.css” highlight=”8″ provider=”manual”]

html,
body {
  padding: 0;
  margin: 0;
}

.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
}

.flex-item {
  background: lightyellow;
  padding: 12px;
  outline: 1px solid orange;
}

[/pastacode]

Justify Content

Secara default, posisi elemen-elemen di dalam kontainer adalah rata kiri, mirip kalo kita bikin elemen float. Selain itu lebarnya juga tetap, nggak berubah.

Continue reading →