I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box container for aligning items. Isn't this similar to what can be achieved with display:inline or display:inline-block for inner items? What unique features does this property bring to CSS design?
Case 1: (using flex in parent)
<html>
<head>
<style>
div{background:blue;display:flex;}
p{background:yellow;}
</style>
</head>
<body>
<div>
<p>This is para1.</p>
<p>This is para2.</p>
<p>This is para3.</p>
</div>
</body>
</html> Case 2: (Using display inline to childs)
<html>
<head>
<style>
div{background:blue;}
p{background:yellow;display:inline;}
</style>
</head>
<body>
<div>
<p>This is para1.</p>
<p>This is para2.</p>
<p>This is para3.</p>
</div>
</body>
</html> Case 3: (Using inline-block in childs)
<html>
<head>
<style>
div{background:blue;}
p{background:yellow;display:inline-block;}
</style>
</head>
<body>
<div>
<p>This is para1.</p>
<p>This is para2.</p>
<p>This is para3.</p>
</div>
</body>
</html> Please, help me understand the purpose of using flex and how it can enhance CSS designs!