灵活布局灵活布局相关属性
flex-direction相关属性
flex-wrap相关属性
justify-content相关属性
对齐- items相关属性
对齐内容相关属性
样品Demo
灵活布局相关属性说明如果display值为flex，则创建灵活布局容器flex-direction伸缩流方向flex-wrap伸缩流换行flex-flow伸缩流(包括方向和换行)。 flex direction与flex-wrap属性justify-content主轴对准align-items侧轴对准align-content堆栈伸缩行集成，实现flex-wrap:wrap和wrap-items堆栈伸缩行只有伸缩项目有多行时，flex用于设置或检索柔性模型对象的子元素如何分配空间才有效。 这是flex-grow、flex-shrink和flex-basis属性的缩写属性，即伸缩性。 默认值为01。 autoorder设置或获取柔性模型对象子元素的显示顺序。 默认值为0flex-grow中的一个数字，它定义项目相对于其他灵活项目的扩展量，即扩展比率flex-shrink中的一个数字，并定义项目相对于其他灵活项目的收缩量，即收缩比率。 flex-basis项目的长度。 合法值“auto”“inherit”或其后的“%”“px”“em”或其他长度单位的数字，即伸缩基准值
对于flex-direction相关属性，row主轴为水平方向，排列顺序与页面的文档顺序相同，row-reverse主轴为水平方向，排列顺序与页面的文档顺序相反，column主轴为垂直方向，排列顺序从上向下排列。
flex-wrap相关属性说明如果nowrap (默认)值为flex，则创建灵活布局容器wrap伸缩流方向wrap-reverse伸缩流换行column-reverse伸缩流(包括方向和换行)，然后单击flap
justify-content相关属性属性说明flex-start默认值。 项目位于容器开头的flex- end项目位于容器末尾的center项目位于容器中心的space-between项目位于每行之间有空白的容器内space-around项目位于每行之前、之间和之后有空白的容器内
align-items相关属性属性说明stretch的默认值。 该项目将扩展，以便容器center项位于容器中心，flex-start项位于容器开头，flex- end项位于容器末尾，基线项位于容器基线上
对齐内容相关属性属性说明stretch的默认值。 将扩展该项目，以使容器center项位于容器中心的flex-start项位于容器开头的flex-end项位于容器末尾的space-between项适合每行之间空的容器中的space-around
样本演示效果图：
HTML5实现：
！ doctypehtmlhtmlheadmetacharset=' utf-8 '/metaname=' viewport ' content=' width=device-width，initial-scale=}.box{width: 50px； height: 50px； border : 1px固态蓝色视频； 文本对齐3360中心； line-height: 50px； }.flex-item1{ background : red； 订单： 3； /*伸缩方向排序*/}.flex-item2{ background : green； 订单： 1； /*伸缩方向排序*/}.flex-item3{ background : blue； 订单： 2； /*设定伸缩方向的排序*/}.flex-container1{ display : flex； flex-direction: row； flex-wrap: wrap； //justify-content : flex-start； }.flex-container2{ display : flex； flex-direction: row； flex-wrap: wrap； */justify-content: flex-end； }.flex-container3{ display : flex； flex-direction: row； flex-wrap: wrap； justify-content 3360 space-around； }.flex-container4{ display : flex； flex-direction: column； flex-wrap: wrap； justify-content 3360 space-around； }.flex-center1{/*伸缩配置空间格式： flex:flex-grow； flex-fhrink； flex-grow*//*意味着除了占据原始宽度之外，还分配了包括扩展或收缩在内的剩馀宽度。 */flex :11自动； }.flex-center2{/*指定所有宽度，包括扩展或收缩*/flex-basis: 0%； flex-shrink: 1； flex-grow: 1； }/style/headbodyh3水平排列/h3h5flex :1 auto/H5 divclass=' flex-container1' divclass=' flex-item1box '1/divdivclass flex-shrink: 1； flex-grow: 1；/H5 divclass=' flex-container1' divclass=' flex-item1box flex-center2'1/divdivclass=' flex-item2box flex-cex divdivclass=' flex-item2box flex-ce divdivclass=' flex-item3box flex-center2' auto/div/div H5 justify-content 33333/H5 divclass=' flex-container1' divclass=' flex-item1box '1/divdivclass=' flex-item2box '1/divdivclass=' H5 divclass=' flex-container2' divclass=' flex-item1box '1/divdivclass=' flex-item2box '1/divdivclass='/H5 divclass=' flex-container3' divclass=' flex-item1box '1/divdivclass=' flex-item2box '1/divdivclass=' divdivclass=' H3 divclass=' flex-container4' divclass=' flex-item1box '1/divdivclass=' flex-item2box '1/divdivclass