Mengenal Flexbox
Apa Itu Flexbox ?
Flexbox atau flexibel box adalah sistem layouting didalam CSS3. Jadi disini kita akan membuat sistem layouting yang flexsibel dengan menggunakan flexbox ini yang mana kita dapat mengatur beberapa box dengan sangat mudah.
Untuk Apa Flexbox?
Tujuan dari flexbox yaitu memberikan container kemampuan untuk mengatur panjang, lebar, dan posisi item-item yang berada di dalamnya agar memaksimalkan ruang yang ada. Pengaturan ini sangat penting bagi seorang frontend developer untuk membuat sebuah website yang nyaman dilihat di berbagai device dengan berbagai macam resolusi.
Untuk mengetahui dan mempelajari flexbox lebih lanjut, anda bisa kunjungi website css-trick.
Kali ini kita akan membuat tampilan flexbox seperti gambar dibawah ini:
Berikut adalah langkah-langkah membuat layout flexbox seperti gambar diatas :
1. Buka Text Editor.
Bisa menggunakan Sublime Text, Notepad++, VS Code, maupun editor lainnya. Disini saya menggunakan VS Code.
2. Membuat file dengan nama sesuai yang anda inginkan dan simpan file dengan tipe .html
3. Seperti biasa kita akan membuat sebuah struktur html
<!DOCTYPE html><html><head><title>Flexbox</title></head><body></body></html>
4. Selanjutnya, buat file dengan nama sesuai yang anda inginkan dan simpan file dengan tipe .css
5. Isikan script berikut kedalam file css
.atas{
border: 640px;
padding: 100px;
background-color: aqua;
text-align: center;}.kiriatas{
width: 80%;
height: 30px;
background-color: #00008B;
float: left;text-align: center;}.kananatas{
width: 20%;
height: 30px;
background-color: purple;
float: left;
text-align: center;}.lingkaran{
width: 100px;
height: 100px;
background-color: maroon;
border-radius: 50%;
float: left;
margin-left: 50px;
margin-top: 20px;
text-align: center;}.tengah1{
width: 40%;
height: 20px;
background-color: chocolate;
position: absolute;
margin-left: 300px;
margin-top: 60px;
text-align: center;}.tengah2{
width: 60%;
height: 20px;
background-color: lime;
position: absolute;
margin-left: 300px;
margin-top: 130px;
text-align: center;}.kiribawah{
width: 50%;
height: 30px;
background-color: brown;
margin-top: 200px;
float: right;
text-align: center;}.kananbawah{
width: 50%;
height: 30px;
background-color: red;
margin-left: 0px;
margin-top: 80px;
float: left;
text-align: center;}.bawah{
border: 640px;
padding: 50px;
margin-top: 260px;
background-color: green;
text-align: center;}
Kemudian simpan file,
6. Agar css tampil pada halaman web maka tambahkan script berikut
<link rel=”stylesheet” href=”style.css”>script diatas diletakkan di dalam tag head / <head>.
&. Setelah itu tambahkan kode dibawah ini kedalam tag body / <body>
<div class="container"> <div class="atas">max width : 640px & height : 100px</div> <div class="kiriatas">width: 80% & height: 30px</div> <div class="kananatas">width: 20% & height: 30px</div> <div class="lingkaran">100px x 100px circle</div> <div class="tengah1">width: 40% & height: 20px</div> <div class="tengah2">width: 60% & height: 20px</div> <div class="kiribawah">width: 50% & height: 30px</div> <div class="kananbawah">width: 50% & height: 30px</div> <div class="bawah">max width: 640px & height: 50px</div>
8. Simpan file dan jalankan file html di browser.
Itulah sedikit tutorial tentang flexbox, semoga bermanfaat dan terus belajar agar bisa menguasai lebih tentang html dan css. Terima Kasih.