Parent:Flex vs Child:inline-block 或 inline（使用 CSS3 flex 的好处？）答案

【问题标题】：Parent:Flex vs Child:inline-block or inline (Benefit of using CSS3 flex?)Parent:Flex vs Child:inline-block 或 inline（使用 CSS3 flex 的好处？）
【发布时间】：2018-02-27 20:11:28
【问题描述】：

我试图了解 CSS3 新条目 display:"flex" 的用法。它带来了多大的好处。但是，除了放置一条虚拟水平线（每个弹性盒容器 1 条）来包含所有内部项目之外，我找不到这个新属性的任何巨大好处。使用 display:inline 或 display:inline-block 的内部项目不是也能做到这一点吗？这个属性带来了什么新的魔力，或者它给 CSS designign 带来了什么价值？

案例 1：（在父级中使用 flex）

<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>

案例 2：（对子项使用内联显示）

<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>

案例3：（在childs中使用inline-block）

<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>

请帮助我了解 flex 的用例以及它可以实现哪些新功能！

【问题讨论】：

阅读css-tricks.com/snippets/css/a-guide-to-flexbox 了解 Flexbox 可以做什么。
@LGSon - 非常有用。
另外，这个问题是题外话，问哪个更好，什么时候更好，因为没有更好，在你的情况下，只有 3 种做类似事情的方法。尝试更具体地说明您想做的事情。
如果它可以早些完成完全相同的事情，那么为做同样的事情带来新的价值没有任何好处。一定有暗门！
我喜欢将 flex 用于 order 专有 Link

标签： css responsive-design flexbox

【解决方案1】：

这个问题有点离题而且很宽泛，不过我还是决定回答一下，因为我认为它对于刚接触 Flexbox 的用户可能具有初始价值

下面是一些示例，基于问题代码，展示了 Flexbox 可以做的一些标准块/内联块/内联不能做的事情（有些可能有很多黑客/技巧）。

为了深入挖掘，这里有一篇好文章：A Complete Guide to Flexbox

弹性容器的属性（有display: flex;）

justify-content 属性，默认为 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>

align-items 属性，默认为 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>

flex 项的属性，flex 容器的 (immediate) 子项

order 属性，默认为 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>

flex-grow 属性，默认为 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>

margin 属性，默认为 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>

【讨论】：

【解决方案2】：

我不确定这是否是您正在寻找的答案，但它就是这样 -

display: flex; 比 display: inline; 或 display: inline-block; 更高级，但仅支持 IE11 但其他大多数浏览器都很好地支持它。 display: flex; 很容易在你了解它们之后管理，这就是为什么新的 Bootstrap 4 是以它们为基础的。

如果您想很好地解释所有这些显示属性的优点，最好阅读 this blog，当我开始研究它们时，这对我很有帮助。

如果您想了解实现它们的最佳方式及其技巧，最好阅读 this blog，这里还有一个 playground 演示，您可以在其中查看所有不同。

这是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.

【讨论】：