{"id":1392,"date":"2018-01-23T10:38:13","date_gmt":"2018-01-23T03:38:13","guid":{"rendered":"https:\/\/blog.nolimit.id\/?p=1392"},"modified":"2023-06-14T13:32:29","modified_gmt":"2023-06-14T06:32:29","slug":"lupakan-css-sekarang","status":"publish","type":"post","link":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/","title":{"rendered":"Lupakan CSS Sekarang!"},"content":{"rendered":"<p style=\"text-align: justify;\">Hai, apakah kamu ingin tahu alasan apa yang harus banget bikin kamu lupain CSS sekarang juga? Maksudnya, bukan lupain gitu aja sih, tapi kita harus <em>move on<\/em> dari cara-cara lama ke cara-cara baru yang lebih simpel dan fleksibel dalam <em>layouting website<\/em>.<\/p>\n<p style=\"text-align: justify;\">Flexbox (modul dari CSS3) merupakan alasan untuk kita <em>move on<\/em> dari cara-cara lama dalam <em>layouting website<\/em>. Dengan Flexbox, kita tidak perlu lagi menggunakan Float, Width : 100% dan mendeskripsikan ukuran @media untuk membuat tampilan kita menjadi responsif di semua <em>device<\/em>. Kita juga tidak perlu lagi repot menerka-nerka nilai Margin untuk membuat sebuah jarak antar-item yang hendak kita buat, karena Flexbox telah membuat segalanya terlihat menjadi lebih indah (*<em>mirip lagu ya..<\/em>).<\/p>\n<p style=\"text-align: justify;\">Oke deh, kenalan sama Flexbox-nya udahan kan? Berikut beberapa contoh penggunaan Flexbox untuk membuat tampilan website kita menjadi lebih rapih di segala sisi, dan pastinya juga responsif di semua device.<\/p>\n<p style=\"text-align: justify;\">Hal yang paling pertama kita lakukan adalah mengatur property <strong>Display<\/strong> menjadi <strong>Flex<\/strong> pada <strong>Container<\/strong> kita. Property tersebut akan mengubah layout model Container menjadi Flexbox dan mengubah elemen yang ada di dalamnya menjadi Flex-item.<\/p>\n<div id=\"attachment_1394\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1394\" class=\"wp-image-1394 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-1-e1516678092623.png\" alt=\"\" width=\"768\" height=\"420\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-1-e1516678092623.png 768w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-1-e1516678092623-300x164.png 300w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-1-e1516678092623-739x404.png 739w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><p id=\"caption-attachment-1394\" class=\"wp-caption-text\"><em>Penerapan display: Flex<\/em><\/p><\/div>\n<p style=\"text-align: justify;\">Secara <em>default<\/em>, Flex menyajikan tampilan kita berupa <em>row<\/em> seperti gambar diatas. Jika kita menginginkan tampilan berupa <em>column<\/em>, kita bisa mengubahnya dengan bantuan property <strong>Flex-direction<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Berikut adalah <em>preview<\/em> ketika kita mengatur<strong> Flex-direction<\/strong> menjadi <strong>Column<\/strong>.<\/p>\n<div id=\"attachment_1395\" style=\"width: 705px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1395\" class=\"wp-image-1395 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-2-e1516678113156.png\" alt=\"\" width=\"695\" height=\"405\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-2-e1516678113156.png 695w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-2-e1516678113156-300x175.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><p id=\"caption-attachment-1395\" class=\"wp-caption-text\"><em>Penerapan Flex-direction Column<\/em><\/p><\/div>\n<p style=\"text-align: justify;\">Selain property Flex-direction, di sini juga akan dibahas sedikit mengenai <em>property<\/em> Justify-content.<\/p>\n<p style=\"text-align: justify;\">Berikut ini adalah contoh nilai-nilai yang bisa digunakan pada <em>property<\/em> <strong>Justify-content<\/strong>:<\/p>\n<h2 style=\"text-align: left;\"><strong>Flex-start<\/strong><\/h2>\n<p style=\"text-align: justify;\"><strong>Flex-start<\/strong> akan meratakan elemen di awal Main-axis. Dalam contoh ini, awal Main-axis adalah kiri, sehingga item-item akan menjadi rata kiri. Berbeda hasilnya jika <strong>Flex-direction<\/strong> kita ubah menjadi Row-reverse, maka <strong>Flex-start<\/strong> akan dimulai dari kanan.<\/p>\n<div id=\"attachment_1396\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1396\" class=\"wp-image-1396 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-3-e1516678133276.png\" alt=\"\" width=\"700\" height=\"401\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-3-e1516678133276.png 700w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-3-e1516678133276-300x172.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-1396\" class=\"wp-caption-text\"><em>Flex-start dimulai dari kiri jika direction-nya Row<\/em><\/p><\/div>\n<h2 style=\"text-align: left;\"><strong>Flex-end<\/strong><\/h2>\n<p style=\"text-align: left;\">Sama halnya dengan <strong>Flex-start<\/strong>, item akan diurutkan di akhir Main-axis. Pada contoh ini, item-item akan dibuat menjadi rata kanan.<\/p>\n<div id=\"attachment_1397\" style=\"width: 705px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1397\" class=\"wp-image-1397 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-4-e1516678151504.png\" alt=\"\" width=\"695\" height=\"408\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-4-e1516678151504.png 695w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-4-e1516678151504-300x176.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><p id=\"caption-attachment-1397\" class=\"wp-caption-text\"><em>Flex-end meratakan item ke ujung Main Axis<\/em><\/p><\/div>\n<h2 style=\"text-align: left;\"><strong>Center<\/strong><\/h2>\n<p style=\"text-align: justify;\">Karena nilainya <strong>Center<\/strong>, maka sudah dipastikan nilai ini akan membuat item menjadi rata tengah.<\/p>\n<div id=\"attachment_1398\" style=\"width: 726px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1398\" class=\"wp-image-1398 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-5-e1516678183323.png\" alt=\"\" width=\"716\" height=\"416\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-5-e1516678183323.png 716w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-5-e1516678183323-300x174.png 300w\" sizes=\"auto, (max-width: 716px) 100vw, 716px\" \/><p id=\"caption-attachment-1398\" class=\"wp-caption-text\"><em>Rata tengah pada main axis<\/em><\/p><\/div>\n<h2 style=\"text-align: left;\"><strong>Space-between<\/strong><\/h2>\n<p style=\"text-align: justify;\"><strong>Space-between<\/strong> akan meratakan item secara merata. Item paling kiri menjadi rata kiri, item paling kanan menjadi rata-kanan, dan item ditengah akan diposisikan secara seimbang mengikuti <em>space<\/em> yang ada. Dengan begitu, kita tidak perlu mengatur nilai margin-nya.<\/p>\n<div id=\"attachment_1399\" style=\"width: 716px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1399\" class=\"wp-image-1399 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-6-e1516678206836.png\" alt=\"\" width=\"706\" height=\"395\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-6-e1516678206836.png 706w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-6-e1516678206836-300x168.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><p id=\"caption-attachment-1399\" class=\"wp-caption-text\"><em>Space-between menambahkan area kosong di dalamnya.<\/em><\/p><\/div>\n<h2 style=\"text-align: left;\"><strong>Space-around<\/strong><\/h2>\n<p style=\"text-align: justify;\"><strong>Space-around<\/strong> hampir sama dengan <strong>Space-between<\/strong>. Perbedaannya, space-around akan membagikan sisa kekosongan dari <em>container<\/em> secara merata pada item-itemnya.<\/p>\n<div id=\"attachment_1400\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1400\" class=\"wp-image-1400 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-7-e1516678226481.png\" alt=\"\" width=\"710\" height=\"412\" srcset=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-7-e1516678226481.png 710w, https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/Flexbox-7-e1516678226481-300x174.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><p id=\"caption-attachment-1400\" class=\"wp-caption-text\"><em>Space around akan membagikan sisa ruang kepada masing-masing item<\/em><\/p><\/div>\n<p style=\"text-align: justify;\">Demikian, pengenalan sedikit mengenai Flexbox. Semoga bisa menambah pengetahuan <em>coding<\/em> kamu dalam <em>layouting<\/em> website.<\/p>\n<p style=\"text-align: justify;\">Buat kamu yang jadi penasaran dengan Flexbox atau buat kamu yang mau mengasah kemampuan kamu dalam layouting menggunakan Flexbox, kamu bisa coba game ini:<\/p>\n<div id=\"attachment_1401\" style=\"width: 1375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1401\" class=\"wp-image-1401 size-full\" src=\"https:\/\/blog.nolimit.id\/wp-content\/uploads\/2018\/01\/Flexbox-8.png\" alt=\"\" width=\"1365\" height=\"729\" \/><p id=\"caption-attachment-1401\" class=\"wp-caption-text\"><em>Permainan Flexbox Defense<\/em><\/p><\/div>\n<blockquote>\n<p style=\"text-align: left;\"><em>*Mohon cek juga browser support (sesuai dengan kebutuhan) sebelum menggunakan CSS Flexbox.<\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Hai, apakah kamu ingin tahu alasan apa yang harus banget bikin kamu lupain CSS sekarang juga? Maksudnya, bukan lupain gitu aja sih, tapi kita harus move on dari cara-cara lama ke cara-cara baru yang lebih simpel dan fleksibel dalam layouting website. Flexbox (modul dari CSS3) merupakan alasan untuk kita move on dari cara-cara lama dalam [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1393,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2340],"tags":[2396],"class_list":["post-1392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-use-case","tag-fitur-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Lupakan CSS Sekarang! - NoLimit Knowledge Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lupakan CSS Sekarang! - NoLimit Knowledge Center\" \/>\n<meta property=\"og:description\" content=\"Hai, apakah kamu ingin tahu alasan apa yang harus banget bikin kamu lupain CSS sekarang juga? Maksudnya, bukan lupain gitu aja sih, tapi kita harus move on dari cara-cara lama ke cara-cara baru yang lebih simpel dan fleksibel dalam layouting website. Flexbox (modul dari CSS3) merupakan alasan untuk kita move on dari cara-cara lama dalam [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/\" \/>\n<meta property=\"og:site_name\" content=\"NoLimit Knowledge Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/NoLimitID\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-23T03:38:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-14T06:32:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"920\" \/>\n\t<meta property=\"og:image:height\" content=\"443\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gerry Ardian\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nolimitid\" \/>\n<meta name=\"twitter:site\" content=\"@nolimitid\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gerry Ardian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/\"},\"author\":{\"name\":\"Gerry Ardian\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#\\\/schema\\\/person\\\/c6219b9b5bc4f795ce5bf0dace0f2c63\"},\"headline\":\"Lupakan CSS Sekarang!\",\"datePublished\":\"2018-01-23T03:38:13+00:00\",\"dateModified\":\"2023-06-14T06:32:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/\"},\"wordCount\":505,\"publisher\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/gambar.jpg\",\"keywords\":[\"fitur css\"],\"articleSection\":[\"Use Case\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/\",\"url\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/\",\"name\":\"Lupakan CSS Sekarang! - NoLimit Knowledge Center\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/gambar.jpg\",\"datePublished\":\"2018-01-23T03:38:13+00:00\",\"dateModified\":\"2023-06-14T06:32:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/gambar.jpg\",\"contentUrl\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/gambar.jpg\",\"width\":920,\"height\":443},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/lupakan-css-sekarang\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lupakan CSS Sekarang!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/\",\"name\":\"NoLimit Knowledge Center\",\"description\":\"Social Media for Everyone\",\"publisher\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#organization\",\"name\":\"NoLimit Indonesia\",\"url\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/Image.jpg\",\"contentUrl\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/Image.jpg\",\"width\":385,\"height\":385,\"caption\":\"NoLimit Indonesia\"},\"image\":{\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/NoLimitID\\\/\",\"https:\\\/\\\/x.com\\\/nolimitid\",\"https:\\\/\\\/www.instagram.com\\\/nolimitid\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company-beta\\\/2388818\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/nolimit.id\\\/blog\\\/#\\\/schema\\\/person\\\/c6219b9b5bc4f795ce5bf0dace0f2c63\",\"name\":\"Gerry Ardian\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g\",\"caption\":\"Gerry Ardian\"},\"url\":\"#\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lupakan CSS Sekarang! - NoLimit Knowledge Center","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/","og_locale":"en_US","og_type":"article","og_title":"Lupakan CSS Sekarang! - NoLimit Knowledge Center","og_description":"Hai, apakah kamu ingin tahu alasan apa yang harus banget bikin kamu lupain CSS sekarang juga? Maksudnya, bukan lupain gitu aja sih, tapi kita harus move on dari cara-cara lama ke cara-cara baru yang lebih simpel dan fleksibel dalam layouting website. Flexbox (modul dari CSS3) merupakan alasan untuk kita move on dari cara-cara lama dalam [&hellip;]","og_url":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/","og_site_name":"NoLimit Knowledge Center","article_publisher":"https:\/\/www.facebook.com\/NoLimitID\/","article_published_time":"2018-01-23T03:38:13+00:00","article_modified_time":"2023-06-14T06:32:29+00:00","og_image":[{"width":920,"height":443,"url":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg","type":"image\/jpeg"}],"author":"Gerry Ardian","twitter_card":"summary_large_image","twitter_creator":"@nolimitid","twitter_site":"@nolimitid","twitter_misc":{"Written by":"Gerry Ardian","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#article","isPartOf":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/"},"author":{"name":"Gerry Ardian","@id":"https:\/\/nolimit.id\/blog\/#\/schema\/person\/c6219b9b5bc4f795ce5bf0dace0f2c63"},"headline":"Lupakan CSS Sekarang!","datePublished":"2018-01-23T03:38:13+00:00","dateModified":"2023-06-14T06:32:29+00:00","mainEntityOfPage":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/"},"wordCount":505,"publisher":{"@id":"https:\/\/nolimit.id\/blog\/#organization"},"image":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#primaryimage"},"thumbnailUrl":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg","keywords":["fitur css"],"articleSection":["Use Case"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/","url":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/","name":"Lupakan CSS Sekarang! - NoLimit Knowledge Center","isPartOf":{"@id":"https:\/\/nolimit.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#primaryimage"},"image":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#primaryimage"},"thumbnailUrl":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg","datePublished":"2018-01-23T03:38:13+00:00","dateModified":"2023-06-14T06:32:29+00:00","breadcrumb":{"@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#primaryimage","url":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg","contentUrl":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2018\/01\/gambar.jpg","width":920,"height":443},{"@type":"BreadcrumbList","@id":"https:\/\/nolimit.id\/blog\/lupakan-css-sekarang\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nolimit.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Lupakan CSS Sekarang!"}]},{"@type":"WebSite","@id":"https:\/\/nolimit.id\/blog\/#website","url":"https:\/\/nolimit.id\/blog\/","name":"NoLimit Knowledge Center","description":"Social Media for Everyone","publisher":{"@id":"https:\/\/nolimit.id\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nolimit.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nolimit.id\/blog\/#organization","name":"NoLimit Indonesia","url":"https:\/\/nolimit.id\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nolimit.id\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2017\/07\/Image.jpg","contentUrl":"https:\/\/nolimit.id\/blog\/wp-content\/uploads\/2017\/07\/Image.jpg","width":385,"height":385,"caption":"NoLimit Indonesia"},"image":{"@id":"https:\/\/nolimit.id\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/NoLimitID\/","https:\/\/x.com\/nolimitid","https:\/\/www.instagram.com\/nolimitid\/","https:\/\/www.linkedin.com\/company-beta\/2388818\/"]},{"@type":"Person","@id":"https:\/\/nolimit.id\/blog\/#\/schema\/person\/c6219b9b5bc4f795ce5bf0dace0f2c63","name":"Gerry Ardian","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d0135fe89c668cbc49805b30ff5ed37ff762cbced963655f643e25914c97067?s=96&d=mm&r=g","caption":"Gerry Ardian"},"url":"#"}]}},"_links":{"self":[{"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/posts\/1392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/comments?post=1392"}],"version-history":[{"count":0,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/posts\/1392\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/media\/1393"}],"wp:attachment":[{"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/media?parent=1392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/categories?post=1392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nolimit.id\/blog\/wp-json\/wp\/v2\/tags?post=1392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}