一:flex布局适用于块级元素也适合于行内元素 块级元素display:flex,行内元素:display:inline-flex 二:flex轴线-----默认两条 1.水平主轴 2.垂直交叉轴 三:容器属性 1.项目的排列方向(决定主轴是水平轴线还是垂直轴线,row-水平,column-垂直) flex-direction: row (默认,从左到右)| row-reverse(从右到左) column (从上到下) column-reverse (从下到上) 2.一行排列不下时的情况 flex-wrap: nowrap(默认,不换行,压缩盒子宽度) wrap(从上往下换行) wrap-reverse(从下往上换行) 3.flex-flow:flex-direction || flex-wrap 缩写形式 4.项目在主轴上的对齐方式 justify-content: flex-start(沿着当前主轴方向,默认水平主轴从左到右) flex-end(沿着当前主轴的反方向) center:主轴中点 space-between(两端对齐) space-evenly(均匀分割空隙) space-around(项目左右两边间隙一样大) 5.项目在次轴上对齐方式 align-items: flex-start:沿着当前次轴方向,默认垂直次轴从上到下 flex-end:沿着当前次轴的反方向 center:次轴的中点对齐 baseline:项目的第一行文字的基线对齐 stretch:默认值,如果项目未设置高度或者auto,项目将占满整个容器的高度 6.多跟轴线(超过一行或者一列)的对齐方式,如果项目只有一根轴线,该属性不起作用 align-content:同align-items属性一致 四:项目属性 1.order属性 定义了项目的排列顺序,数值越小,排列于考前,默认为0 2.flex-grow属性 定义了项目的放大比例,默认为0,不放大,如果项目所有的flex-grow属性都为1,它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为n,另一个项目为1,为n的项目占据的剩余空间的n/(n+1) 3. flex-shrink属性 定义了项目的缩小比列,默认为1,不缩小。如果空间不足,该项目将缩小 4.flex-basis属性 定义了在分配多余空间之前,项目占据的主轴空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如200px),项目将占据固定空间 5. flex属性 是flex-grow属性flex-shrink属性和flex-basis属性的简写,默认值为 0 1 auto ,后两个属性可选 6.align-self属性 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch 。允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性