共计 2741 个字符，预计需要花费 7 分钟才能阅读完成。
这是一个很经典的 CSS 布局问题，新人彻底了解了这个问题，HTML 网页布局思维便已把握了七七八八了。
问题
先看一段 HTML 代码：
<!DOCTYPE html>
<html>
<body>
<h1> 这是一个题目 </h1>
<div class="wrapper">
<p> 这是一个段落 </p>
<p> 这是一个段落 </p>
<p> 这是一个段落 </p>
</div>
</body>
</html>因为 p 标签默认是块级元素，宽度默认会占满父容器的 100%，所以这个代码默认展示进去的款式是这样的：
问题与这个示例无关，是这样的：如何将三行文本“这是一个段落”合并到一行，从左向右排行显示，且不必移除 <p> 标签？
最简略的解决方案只须要加一行 CSS 款式代码：
.wrapper p {display: inline;}运行成果如下所示：
为什么简略加一个 inline 款式就能够解决问题？
晚期网页为了从向至下流式展现内容，依据须要将标签元素默认分为了两类：
- 块级元素
- 行内元素
块级元素默认占据父容器的 100% 宽度，同时能够有高度，在不指定高度的时候，高度由子元素沉积决定。例如 div、p、h1~h6 等标签，但凡默认在网页中占据全副页面宽度的元素，都是块级元素。
而行内元素用于在一行内从左向右展现小内容，行内元素默认只有宽度，没有高度，并且它们的宽度也是由它们自身的内容所决定的。例如 a、br、b、em、img、sub、sup、strong 等标签，但凡默认不占据 100% 父容器宽度的元素，都能够视为行内元素。如果想给行内元素指定高度，能够在父容器上给行元素设置 line-height 款式。
这两类元素的作用，就是合起来展现一个从上至下顺次展现、每行从左至右顺次排列的流布局，如下所示。
回头看咱们的示例，p 标签默认是块级标签，它在渲染时要占满页面容器的 100% 宽度，所以默认成果三行文本“这是一个段落”是从上向下顺次排列的。
当咱们通过类选择器 + 标签选择器（.wrapper p），批改了所有 p 标签的 display 款式后，行将 display 款式设置为 inline，这时候这个页面内的所有 p 标签曾经不是块级元素了，都变成了行内元素。
HTML 元素是什么块级元素，还是行内元素，实质上是由它们携带的默认的 CSS 款式决定的，也就是由 display 等于 block 或 inline 决定的，等于 block 就是块级元素，等于 inline 就是行内元素。因为 CSS 能够管制所有 HTML 元素的款式，事实上咱们甚至能够将任何一个 HTML 元素批改为其余元素————当然如果真批改的话，这里还波及元素属性的问题，在这里咱们只谈款式。HTML 元素默认携带的款式是由其名称决定的，所有元素的默认款式都是能够通过 CSS 代码批改的。
当给 p 标签设置了 display 款式为 inline 当前，这时候 p 标签的行为与 span 标签相似了，于是三行文本“这是一个段落”便是从左向右，在一行内展现了，如果一行展现不了，内容还会主动换行，就像其余行内元素所示意进去的行为那样。
由 inline-block 决定的行内块级元素
随着网页布局复杂度的晋升，起初又呈现了 inline-block 款式值，咱们能够批改示例，看一看将 display 批改为 inline-block 之后的成果，如下所示。
成果与批改为 inline 是类似的，在这个示例中看不出什么差异。事实上 inline-blcok 代表行内的块级元素，这样的元素既能够在一行之内从左向右主动顺次排列，能够领有本人的高度，又能够作为一个部分的小容器，再包容其余子元素。
inline-blcok 款式的呈现，代表 CSS 在网页布局方面曾经没有什么能力短板了，只有网页设计师想不到的，没有 CSS 实现的布局。
flex 布局
但 CSS 的网页布局能力倒退到这里并没有进行，起初为了更好了解决父容器与子元素的组合款式，flex 布局被创造进去了。flex 布局可能实现的成果，用以往的 CSS 也能够实现，但用 flex 布局的办法实现，代码会更简洁、逻辑会更加清晰、页面的扩展性也更好。
上面作者依然拿下面的示例革新，如果不设置 display 为 inline 或 inline-block，应用 flex 布局怎么达到同样的成果呢？也是只增加一行 CSS 代码就足够了，如下所示。
<!DOCTYPE html>
<html>
<body>
<style>
.wrapper {display: flex;}
</style>
<h1> 这是一个题目 </h1>
<div class="wrapper">
<p> 这是一个段落 </p>
<p> 这是一个段落 </p>
<p> 这是一个段落 </p>
</div>
</body>
</html>运行成果如下所示：
成果是一样的。
将 display 设置为 flex 就代表了启用 flex 布局。因为默认状况下 flex-direction 等于 row，子元素会像行内元素那样从左向右排行，所以只写一行 display 等于 flex 款式代码就能够了。
flex 布局能力很弱小，它不仅能够解决从左向右的横向布局，还能够解决从上向下的纵向布局，两个方向的布局应用的是同一套款式语义。
很多人都感觉这套语义记了又忘，切实很难记住，即便是富有经验的网页设计师在许久不手写 CSS 代码之后，也须要借助工具才能够将款式代码写对。针对开发者的这个痛点，新版本的 Chrome 浏览器当初提供了这样的一个 flex 布局辅助设计性能，如下所示，当咱们给元素增加了 display 等于 flex 的款式代码后，前面会呈现一个性能按钮，点击它，会开展一个 flex 布局互动小面板。点击这个面板上具体的排列项，相应的款式代码即会主动生成。
当前不必再记那些难记的款式名称了，有须要的时候调出这个 flex 布局互动小面板，入手你发财的小手点一点，所有布局代码都能搞定了。
小结
HTML 开发次要有两种布局思维：传统 div 流式布局和 flex 布局。
还有一种全页面都应用绝对值定位的布局思维，这种布局思维只实用于 Web 治理后盾或工具 Web 我的项目等开发场景，对于面向 C 端用户的场景是不实用的。HTML 网页的基本设计哲学是流式布局————整体上从上向下、行内从左向右的流式布局，这种布局能够让 HTML 内容能够一边加载一边渲染与展现，这是一种很好的设计哲学，不要轻易舍弃这种哲学。
flex 布局实质上继承了流式布局的思维，它与流式布局并不抵触，只是丰盛了 CSS 在父容器子元素组合关系布局上的能力。在网页设计中，当初广泛优先应用 flex 布局，用最简略的 CSS 代码达到设计的需要。在具体设计时，配合应用 Chrome 开发者工具中的 flex 布局小面板，写起 flex 布局代码也很容易。
著作权归 LIYI 所有
基于 CC BY-SA 4.0 协定
原文链接：https://yishulun.com/posts/20…