Membagi Kolom dengan Display Flex di CSS
hallo teman teman, CSS selalu berkembang dari waktu ke waktu, di mana dulu kita ingin membagi kolom mesti dengan beberapa cara yang sedikit rumit, namun dengan ada nya display flex membagi kolom amat lah gampang, disni saya akan menshare cara Membagi Kolom dengan Display Flex di CSS, yuk kita praktekan teman teman..
kita bikin struktur html berikut di index. html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> disaply </title>
</head>
<body>
<h2> Display Flex </h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio ex fuga aliquam animi harum, consequuntur, soluta nemo! Praesentium perferendis aliquam sed esse eaque voluptates illo dolor ex rem asperiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio ex fuga aliquam animi harum, consequuntur, soluta nemo! Praesentium perferendis aliquam sed esse eaque voluptates illo dolor ex rem asperiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio ex fuga aliquam animi harum, consequuntur, soluta nemo! Praesentium perferendis aliquam sed esse eaque voluptates illo dolor ex rem asperiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio ex fuga aliquam animi harum, consequuntur, soluta nemo! Praesentium perferendis aliquam sed esse eaque voluptates illo dolor ex rem asperiores?</p>
</div>
</body>
</html>
di atas terlihat saya mempunyai 4 paragraf yang akan kita untuk satu row yang di pada nya ada 4 kolom.
nah kini kita gunakan display flex di css, seperti ini css nya
*{padding: 0;margin: 0}
body{font-family: arial}
div{
display: flex;
padding: 20px;
}
p{
padding: 10px;
}
h2{
text-align: center
}seperti ini hasil nya.
dengan menggunakan display flex di parent element nya karenanya akan terbagi dengan sendiri nya walaupun kita menmbahkan tag p berikut nya.
demikian panduan Membagi Kolom dengan Display Flex di CSS, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
