{"id":52250,"date":"2024-12-23T09:20:17","date_gmt":"2024-12-23T02:20:17","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=52250"},"modified":"2025-01-28T14:22:44","modified_gmt":"2025-01-28T07:22:44","slug":"belajar-css-bagian-12","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-12\/","title":{"rendered":"Belajar CSS Bagian 12: Fungsi dan Contoh CSS Flexbox Layout"},"content":{"rendered":"\n<p>Dalam belajar CSS bagian 11, kita telah belajar tentang fungsi dan contoh <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-11\/\" target=\"_blank\" rel=\"noopener\" title=\"css grid layout\">CSS Grid <em>layout<\/em><\/a>. Pada series lanjutan belajar CSS bagian 12 ini, kita akan belajar tentang apa itu Flex <em>layout<\/em>, fungsi hingga contohnya pada website.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Flexbox <em>Layout<\/em>?<\/h2>\n\n\n\n<p>CSS Flexible Box <em>layout<\/em> atau sering disebut dengan Flexbox <em>layout <\/em>adalah sebuah sistem CSS yang berfungsi untuk menyederhanakan tata letak tampilan website.<\/p>\n\n\n\n<p>Flexbox dapat mengatur elemen secara responsif baik dalam arah horizontal maupun vertikal, tanpa perlu menggunakan tata letak tradisional yang lebih kompleks seperti <em>float <\/em>atau <em>positioning<\/em>.<\/p>\n\n\n\n<p>Flexbox sangat berguna untuk membuat tata letak tampilan website yang dinamis, seperti menyamakan elemen di tengah, membagi ruang secara proporsional, atau mengatur elemen dengan ukuran berbeda agar tetap seimbang di berbagai perangkat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fungsi CSS Flexbox<\/h2>\n\n\n\n<p>Berikut adalah fungsi utama dari CSS Flexbox:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mengatur elemen secara horizontal atau vertikal<\/strong>: Flexbox dapat diatur dalam satu arah, baik itu secara horizontal (row) maupun secara vertikal (column).<\/li>\n\n\n\n<li><strong>Membuat elemen responsif<\/strong>: Elemen menggunakan <em>layout <\/em>flexbox dapat menyesuaikan ukurannya secara otomatis sesuai dengan ukuran layar sehingga dapat membuatnya lebih responsif.<\/li>\n\n\n\n<li><strong>Membagi elemen dengan mudah<\/strong>: Properti seperti justify-content, align-items, dan align-content dapat disesuaikan dengan posisi elemen seperti tengah, kiri, kanan, atas, bawah, atau secara merata dalam kontainer.<\/li>\n\n\n\n<li><strong>Membagi ruang secara proporsional<\/strong>: Properti seperti flex-grow dan flex-shrink, <em>layout <\/em>flexbox dapat membagi ukuran secara merata.<\/li>\n\n\n\n<li><strong>Mengatur urutan elemen<\/strong>: Properti order dapat mengubah urutan tampilan elemen tanpa harus memindahkan elemen tersebut.<\/li>\n\n\n\n<li><strong>Mengatur elemen dengan ukuran dinamis<\/strong>: CSS <em>layout <\/em>flexbox dapat mengelola elemen dengan ukuran berbeda di dalam kontainer yang sama.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dasar Penggunaan CSS Flexbox<\/h2>\n\n\n\n<p>Setelah mengetahu pengertian dan fungsi dari flexbox, selanjutnya dalam belajar CSS bagian 12 ini kami akan menjabarkan tentang dasar penggunaan css flexbox. Berikut penggunaan dasarnya:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. CSS Flexbox <em>Layout<\/em><\/h3>\n\n\n\n<p>Untuk menggunakan Flexbox <em>layout <\/em>anda harus membuat sebuah <em>container <\/em>dengan <em>property <\/em>: display dan menggunakan nilai \/ <em>value<\/em> flex. Berikut contohnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. CSS Flex Container<\/h3>\n\n\n\n<p>Setelah Anda membuat sebuah elemen kontainer menggunakan <em>properti <\/em><code>display:flex<\/code>, maka secara otomatis <em>layout <\/em>pada kontainer tersebut akan menggunakan <em>layout <\/em>flexbox <em>container,<\/em> sehingga Anda dapat menggunakan beberapa properti lain yang digunakan oleh <em>layout <\/em>flexbox.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. CSS Flex Items<\/h3>\n\n\n\n<p>Setelah membuat elemen kontainer dengan <em>layout <\/em>flexbox, maka anda dapat menggunakan beberapa properti flex item. Berikut beberapa properti yang sering digunakan dalam membangun tampilan website menggunakan flex yaitu :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>display<\/li>\n\n\n\n<li>flex-direction<\/li>\n\n\n\n<li>justify-content<\/li>\n\n\n\n<li>align-items<\/li>\n\n\n\n<li>align-content<\/li>\n\n\n\n<li>order<\/li>\n\n\n\n<li>dll<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. CSS Flex Responsive<\/h3>\n\n\n\n<p>Selain itu menggunakan <em>layout <\/em>flexbox dapat menyesuaikan berdasarkan ukuran layar pengunjung website, properti yang digunakan yaitu <code>flex-direction<\/code> dan <code>flex-wrap<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Properti yang sering digunakan<\/h2>\n\n\n\n<p>Berikut adalah beberapa properti yang sering digunakan pada css flexbox.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. display<\/h3>\n\n\n\n<p>Pertama kali agar kontainer menggunakan flexbox, maka property display harus menggunakan nilai \/ <em>value <\/em>flex. Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. flex-direction<\/h3>\n\n\n\n<p>Properti <code>flex-direction<\/code> dapat menentukan arah yang akan menampilkan elemen yang ada di dalam container flexbox. Arah tersebut dapat mengarah berbaris atau horizontal (dari kiri ke kanan atau sebaliknya), atau seperti kolom\/vertikal (dari atas kebawah atau sebaliknya). Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  flex-direction: column;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. justify-content<\/h3>\n\n\n\n<p>Properti <code>justify-content<\/code> digunakan untuk menentukan elemen agar sejajar di antara elemen secara horizontal. Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  justify-content:center ;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. align-items<\/h3>\n\n\n\n<p>Properti <code>align-items<\/code> digunakan untuk menentukan elemen <span style=\"text-decoration: underline;\">di dalam kontainer<\/span> agar sejajar di antara elemen secara horizontal. Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  align-items: center;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. align-content<\/h3>\n\n\n\n<p>Properti <code>align-content<\/code> digunakan untuk menentukan elemen <span style=\"text-decoration: underline;\">di dalam kontainer<\/span> agar sejajar di antara elemen secara vertikal. Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  align-content: center;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6. order<\/h3>\n\n\n\n<p>Properti <code>order <\/code>digunakan untuk mengubah urutan elemen di dalam kontainer flex. Anda dapat mengurutkan dari awal hingga akhir atau dari atas ke bawah (flex-direction:column) atau dari kiri ke kanan (flex-direction:row). Berikut contohnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  flex-direction: row;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Implementasi Flexbox <em>Layout<\/em><\/h2>\n\n\n\n<p>Untuk membuat <em>layout <\/em>flexbox, Anda harus membuat sebuah container html dengan property display menggunakan nilai\/value flex. Berikut contoh skripnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"flex-container\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>kemudian untuk script CSS-nya yaitu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.flex-container {\n  display: flex;\n  flex-direction: column;\n}<\/code><\/pre>\n\n\n\n<p>Selanjutnya, tambahkan item di dalam kontainer yang dibuat seperti di atas, berikut contoh <em>script <\/em>htmlnya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"flex-container\"&gt;\n  &lt;div class=\"item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;3&lt;\/div&gt;  \n  &lt;div class=\"item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;6&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;7&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;8&lt;\/div&gt;  \n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Kemudian, tambahkan <em>script <\/em>CSS untuk mengatur flex <em>layout <\/em>pada kontainer html tersebut, berikut contoh <em>script <\/em>lengkapnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.grid-container {\n    display: flex;\n    background-color: blueviolet;\n    gap: 10px;\n    padding: 10px;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    height: 400px;\n}\n.item {\n    text-align: center;\n    background-color: aqua;\n    padding: 10px;\n    font-size: 28px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;3&lt;\/div&gt;  \n  &lt;div class=\"item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;6&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;7&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;8&lt;\/div&gt;  \n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Kemudian jika di <em>testing <\/em>di <em>browser <\/em>untuk tampilan layar lebar (laptop\/dekstop pc), akan menampilkan <em>screenshoot <\/em>seperti berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-1024x485.png\" alt=\"CSS Flexbox tampilan pc \/ dekstop \/ laptop - belajar css\" class=\"wp-image-52252\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-1024x485.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-300x142.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-768x364.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-1536x728.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-370x175.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-270x128.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-570x270.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30-740x351.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-30.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Sedangkan jika di <em>testing <\/em>di <em>browser <\/em>untuk tampilan layar kecil (<em>mobile<\/em>\/<em>smartphone<\/em>), akan menampilkan <em>screenshoot <\/em>seperti berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-1024x428.png\" alt=\"CSS Flexbox tampilan mobile \/ smartphone - belajar css\" class=\"wp-image-52251\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-1024x428.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-300x126.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-768x321.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-1536x643.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-370x155.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-270x113.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-570x239.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29-740x310.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/12\/image-29.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Flexbox dapat mengatur elemen secara responsif baik dalam arah horizontal maupun vertikal, tanpa perlu menggunakan tata letak tradisional yang lebih kompleks. Dengan menguasai Flexbox, Anda akan lebih mudah menciptakan desain yang responsif, modern, dan fungsional.<\/p>\n\n\n\n<p>Demikian artikel belajar css bagian ke 12 tentang CSS Flexbox <em>layout<\/em>. Selanjutnya pada belajar CSS bagian 13, kita akan belajar tentang <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-13\/\" title=\"\">Properti CSS Display<\/a>. Yuk pelajari panduan berikutnya untuk meningkatkan kemampuan CSS Anda. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dalam belajar CSS bagian 11, kita telah belajar tentang fungsi dan contoh CSS Grid layout. Pada series lanjutan belajar CSS bagian 12 ini, kita akan belajar tentang apa itu Flex layout, fungsi hingga contohnya pada website. Apa itu Flexbox Layout? CSS Flexible Box layout atau sering disebut dengan Flexbox layout adalah sebuah sistem CSS yang [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":52328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,1787,2186],"class_list":{"0":"post-52250","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-layout","11":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=52250"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52328"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=52250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=52250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=52250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}