flex布局.pptxVIP

flex布局flex主要概念容器：设置有display：flex属性的元素为容器子项目：容器的所有子元素默认为子项目容器默认存在两根轴：主轴和交叉轴容器有以下6个属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content以下为例子：容器设置宽度1000px， 高度200px; 项目设置宽度300px;1.flex-direction该属性决定项目主轴的方向（即项目的排列方向）该属性可取以下四个值[row, row-reverse, column, column-reverse]row:主轴为水平方向，起点在左边。row-revers：主轴在水平方向，起点在右边column: 主轴在垂直方向，起点在上边。column-reverse:主轴在垂直方向，起点在最下端2. flex-wrap默认情况下，项目都排在一条线（又称轴线）上。flex-wrap属性定义，如果一条轴线排不下，可以选择换行。该属性可取三个值[wrap, nowrap, warp-reverse]wrap: 换行，第一行在上方。nowrap:不换行项目设置为宽300px，但是明显项目宽度不一致，并且不是300px，因为未换行，所以会挤在一起）wrap-reverse: 换行，行的起始点在下方3. flex-flow该属性为flex-d