弹性布局（display：flex）

一、Flex 布局

 

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

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

 

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

 

二、基本概念

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

 

 三、容器的属性

 

 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属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，该属性不起作用