浅谈css布局block，inline，flex，inline-block，inline-flex区别

一. 知识铺垫

1.官方简介

display 属性是用于控制布局的最重要的 CSS 属性，它规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

2.块级元素（block element）和行内元素（inline）的区别。

块级元素：
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
可以对宽度和高度进行设置。

<!-- 块级元素的一些例子 -->
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

行内元素
内联元素不从新行开始，仅占用所需的宽度。

行内元素的一些例子：
<span>
<a>
<img>

行内元素大多数不可设置宽高。
为什么说是大多数，因为img和input属于行内元素，但是它们可以设置宽高。
因为、属于替换元素，替换元素一般有内在尺寸和宽高比(auto时起作用)，所以具有width和height，可以设定。
详细解释请看：
为何img、input等内联元素可设置宽高

二. 主要区别

1. display: block ，display：inline和display：inline-block 区别。

display: block 将元素设置为块级元素。
display：inline 将元素设置为行内元素。
区别就是第2点中讲到的，一个是是否独占一行，一个是是否可设置宽高问题（img，input除外）。
display：inline-block 将元素设置成行内块级元素，兼容了两者的优点。
使得元素在同一行显示（不独占一行）的同时，又可以对它的宽高进行设置。
与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。
与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

2. flex 布局（flexBox)

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：
块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

display：inline-flex； align-items：center 可垂直居中。
用于块状元素的属性对flex 容器不起作用
Flex 容器不是块级容器，因此一些专用于块状布局的属性，对Flex 布局不起作用。比如：

1. column-* 多栏布局里的column-*属性

2. float 和 clear 不能让弹性容器下的项目摆脱文档流，或清除浮动。

3. vertical-align 垂直居中不起作用。（flex布局下，垂直居中更简单舒适：看我这里的一篇文章）

4. 伪类元素 ::first-line 和 ::first-letter
   flex，inline-flex，inline-block 区别

flex： 将对象作为块级弹性伸缩盒显示。

inline-flex：将对象作为内联弹性伸缩盒显示。

inline-block: 将对象呈现为inline对象，但是对象的内容作为block对象呈现。

比如说，inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

那么，对于inline-block来说，margin和padding的垂直方向的边距，则会产生边距效果。