web前端入门到实战：弹性布局（display:flex;）属性详解

1、Flex布局-前言

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，而且可以使容器中的子元素大小未知或动态变化状况下仍然可以分配好子元素之间的空间。

Flex 布局的主要思想是使父容器可以调节子元素的宽度/高度（和排列顺序），从而可以最好地填充可用空间（主要是为了适应全部类型的显示设备和屏幕尺寸）。flex布容器可以放大子元素使之尽量填充可用空间，也能够收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不一样于常规布局（基于垂直的块（block）和基于水平的内联（inline））。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来讲缺少灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

注:

• Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。
• 设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。

2、 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的全部子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

3、容器的属性

display:flex;

flex-direction

justify-content

space-around 和 space-between 这两个值的区别不能很直观的理解。
space-between 是两端对齐，使每一个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

space-around 则会在每一个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每一个矩形子元素产生的间隔不会重叠，因此间隔变成两倍）。

align-items

（注意 对于 align-items: stretch 来讲，必须将每个矩形子元素(flex项)的高度设置为 auto，不然 height 属性将会覆盖该 stretch）

对于 align-items: baseline 来讲，要注意若是去掉段落标签或者没内容，矩形子元素(flex项)就会按照每一个矩形的底部对齐，以下图所示：

为了更好地演示主轴和交叉轴的区别，让咱们结合 justify-content和align-items，看看在 flex-direction 两个不一样属性值的做用下，轴心有什么不一样：

align-content

align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

4、项目的属性

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

注：项目属性的全面理解较为复杂，你们能够收藏后再慢慢研究