一、Flex布局-前言Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性，旨在提供一个更有效的布局、对齐以及在子元素之间分配空间的能力，即使容器中子元素的大小未知或动态变化。flex布局的主要思想是让父容器能够调整其子元素的宽度/高度（和顺序），以便最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）.flexclothcontainer可以将子元素放大尽可能的填满可用空间，也可以将子元素缩小使其不溢出。最重要的是，flexbox布局是方向无关的，不像常规布局（基于垂直的块（block）和基于水平的内联（inline））。虽然传统布局适用于页面，但对于大型或复杂的应用程序布局而言，它们缺乏灵活性（尤其是在改变方向、调整大小、拉伸、收缩等方面）。注意：Flexbox布局最适合应用程序组件和小型布局，而Grid布局适合大型布局。设置为Flex布局后，子元素的float、clear、vertical-align属性将失效。2.基本概念采用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。3.容器显示属性的区别：flex；flex-directionjustify-contentspace-around和space-between无法直观理解。space-between是两端对齐的，这样每个矩形子元素（flexitem）之间的空间是相等的，但是两端的矩形子元素（flexitem）之间不会创建容器之间的空间。space-around会在每个矩形子元素（flexitem）的两边产生一个大小相同的间隙，也就是说两端的矩形子元素（flexitem）和容器之间的空间恰好是两个矩形子元素（弹性项目）是它们之间空间大小的一半（每个矩形子元素生成的空间不重叠，因此空间加倍）。align-items（注意align-items:stretch，每个矩形子元素（flexitem）的高度必须设置为auto，否则height属性会覆盖stretch）foralign-items:baseline，要注意如果paragraph标签被移除或者没有内容时，矩形子元素（flexitems）会对齐到每个矩形的底部，如下图：为了更好的展示主轴和十字的区别axis，让我们结合justify-content和align-items，看看axes在两个不同的flex-direction属性值的作用下有什么不同：align-contentalign-content属性定义了多个axes的对齐方式。如果项目只有一个轴，则此属性无效。4.项目属性注：全面了解项目属性比较复杂，可以参考文章：https://www.html.cn/archives/...https://www.html.cn/archives/...
