flex布局基础知识Documentation基本概念：一种有效的布局方式，即使视口大小未知或元素未知，智能、灵活的调整和分配元素和空间两者之间的关系特性Defaulthorizo??ntalalignmentDefaultisnot默认情况下，换行使所有子元素占一行，并自动调整子元素的大小（更改默认宽度）。包含概念：flex布局容器（显示为flex的父元素）flexitem（flex布局容器中的子元素）flexbox格式化上下文主轴：Main-Axis轴侧轴：Cross-Axis轴包含类型：flexinline-flexflex容器属性:弹性方向||弹性包装||弹性流||证明内容||对齐项目||align-content对齐属性>`flex-direction`:row(主轴默认值)||列（侧轴）||行反转（主轴翻转）||column-reverse(sideaxisflip)newline属性flex-wrap:wrap(linebreak)||nowrap（没有换行的默认值）||wrap-reverse（反向换行）的缩写flex-flow：rowwrap；主轴布局属性justify-content:flex-start(默认值左对齐)||flex-end（右对齐）||center（居中对齐）||space-between（两端对齐：均匀分布中间距离）||space-around（让每个flex项目有相同的空间）侧轴布局属性align-item：flex-start（顶部对齐）||flex-end（底部对齐）||中心（中心）||拉伸（拉伸默认值：全高）||baseline（基线对齐）多行布局属性align-content:flex-start（多行顶部对齐）||flex-end（多行底部对齐）||center（多线居中）||stretch（拉伸默认值：多行占据整个高度）flexitemproperties:order||弹性增长||收缩||flex-basisorder：允许弹性项目在弹性容器内重新排序。>默认值为0>可以接受正负值>flex项目根据`order`重新排序>面对相同的值，由html文档顺序确定（与float相同）flex-grow和flex-shrink：允许设置flexitems容器中有多余空间时如何放大，没有空间时如何收缩>0或任何大于0的正数都可以>`flex-grow`:默认值为0`flex-shrink`：默认值为1>0和正数分别表示paddingoff和on>`flex-grow`：主轴`flex-shrink`：侧轴flex-basis：指定item的初始计算大小>的默认值为auto，flex项目宽度根据内容自动计算>取值范围为width属性px的任意值||雷姆||嗯||%||大众||wh等>如果flex-basis属性的值为0，还需要提供单位连写：flex:flex-growflex-shrinkflex-basis>`flex:01auto//都是默认值`>absoluteflexitem`flex:11`>relativeflexitem`flex-basis:150px`>flex:none`flex:00auto`计算与内容挂钩>flex:auto`flex:11auto`初始计算是和内容挂钩的，不挂的话会自动缩放>flex:'positivenumber'一个正数可以表示任意正数（相当于`flex:positiveNumber10`）>多个flex-grow不同的值将按比例分配剩余空间algin-self:auto||弹性启动||弹性端||中心||基线||stretch(用于控制当前flexitem在侧轴方向的布局)>auto继承自父元素，默认值为stretch(实际上还是继承父元素的默认值)absoluteandrelativeflexitemsin的间距绝对弹性项目仅根据内容大小计算flex-basis:0>根据`flex-grow`分配相对于弹性项目的空间项目根据其flex-grow属性计算flex-basis:auto>通过content确定初始大小auto-margin对齐使用margin:auto导致左右方向占满剩余空间使用margin:auto导致justify-contentfailoverflex-directionflex-direction:column导致主轴和侧轴切换，导致justify-content和algin-item的动作方向改变解决问题（6种）兼容性【bug列表和灵活性】https：//github.com/philipwalt...有些浏览器允许缩小到小于原始大小flex:0090px;*解决方案：flex:10auto
