CODEWITHSUNDEEP
cssresponsive-designflexbox
Deadpool
Deadpool

Reputation: 8240

Parent:Flex vs Child:inline-block or inline (Benefit of using CSS3 flex?)

I was trying to understand the usage of CSS3 new entry of display:"flex". What great benefits it has brougt along with it. However, I could not find any great benefit of this new property, except putting a virtual horizontal line (1 per flex box container) to have all the inside items. Wasn't this same achieved with inner items using display:inline or display:inline-block? What new magic has this property brought or what value does it bring in to CSS designign?

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 out understanding the use-case of flex and what new can it achieve!

Upvotes: 2

Views: 2261

Answers (2)

Asons
Asons

Reputation: 87251

This question is somewhat off-topic and very broad, I still decided to answer though, as I think it could have an initial value for users who are new to Flexbox

Below is some samples, based on the questions code, that show some of the things Flexbox can do that standard block/inline-block/inline can't (some might with a lot of hacks/tricks).

To dig deeper, here is a good article: A Complete Guide to Flexbox

Properties for the flex container (has the display: flex;)

The justify-content property, defaults to flex-start

div {
  background: blue;
  display: flex;
  justify-content: space-around;   /*  distribute the remaining space around each item  */
}

p {
  background: yellow;
  margin: 5px;
  padding: 5px;
}
<div>
  <p>This is P1</p>
  <p>This is P2</p>
  <p>This is P3</p>
</div>

The align-items property, defaults to stretch

div {
  background: blue;
  display: flex;
  justify-content: center;      /*  hor. center  */
  align-items: center;          /*  ver. center  */
  
  /*  gave a height so the vertical centering can be seen  */
  height: 150px;
}

p {
  background: yellow;
  margin: 5px;
  padding: 5px;
}
<div>
  <p>This is P1</p>
  <p>This is P2</p>
  <p>This is P3</p>
</div>

Properties for the flex items, the (immediate) children of the flex container

The order property, defaults to 0

div {
  background: blue;
  display: flex;
}

p {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

p:nth-child(2) {
  order: 1;              /*  move 2nd item last  */
}
<div>
  <p>This is P1</p>
  <p>This is P2</p>
  <p>This is P3</p>
</div>

The flex-grow property, defaults to 0

div {
  background: blue;
  display: flex;
}

p {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

p:nth-child(2) {
  flex-grow: 1;           /*  make 2nd item fill the remaining space  */
}
<div>
  <p>This is P1</p>
  <p>This is P2</p>
  <p>This is P3</p>
</div>

The margin property, defaults to 0

div {
  background: blue;
  display: flex;
}

p {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

p:nth-child(2) {
  margin-left: auto;        /*  push the 2nd/3rd item to the right  */
}
<div>
  <p>This is P1</p>
  <p>This is P2</p>
  <p>This is P3</p>
</div>

Upvotes: 2

Jithin Raj P R
Jithin Raj P R

Reputation: 6817

I am not sure if this is the answer you are looking for but here it goes -

display: flex; is more advanced than display: inline; or display: inline-block; but it is only supported from IE11 but other most of the browsers support it very well. display: flex; is much easy to manage once you learn them that's why the new Bootstrap 4 is based on them.

If you want a good explanation of the advantages of all these display properties you better read this blog, this helped me very much when I started my study on them.

If you want to know the best way of implementing them and their tricks you better read this blog, this also has a playground demo where you can check all the differents.

This is the most common use of display: flex; -

div {
  background: blue;
  height: 100px;
  margin-bottom: 10px;
  width: 100%;
}

div.flex {
  display: flex;
}

p {
  background: yellow;
  display: inline-block;
  width: 30%;
  margin-left: 1%
}
<div>
  <p>This is para1.This is para1.This is para1.</p>
  <p>This is para2.This is para2.</p>
  <p>This is para3.</p>
</div>

<div class="flex">
  <p>This is para1.This is para1.This is para1.</p>
  <p>This is para2.This is para2.</p>
  <p>This is para3.</p>
</div>

<span>In here you can see than when i used the  <strong>display: flex;</strong></span> the height of the child is same irespetive of its content. Hope you got the point.

Upvotes: 2

Related Questions