Membagi Kolom dengan Display Flex di CSS

hai teman teman, CSS selalu berkembang dari waktu ke waktu, di mana dulu kita ingin membagi kolom harus dengan beberapa cara yang sedikit rumit, namun dengan ada nya display flex membagi kolom sangat lah mudah, disni saya akan menshare cara Membagi Kolom dengan Display Flex di CSS, yuk kita praktekan teman teman..

kita buat 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 bagi satu row yang di dalam nya ada 4 kolom.

nah sekarang 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 maka akan terbagi dengan sendiri nya walaupun kita menmbahkan tag p berikut nya.

sekian tutorial Membagi Kolom dengan Display Flex di CSS, semoga bermanfaat yah teman teman.