H5移动端开发知识总结(二)
测试文本
容器的6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
本属性觉得主轴的方向
row(默认值)：主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
column: 主轴为垂直方向，起点在上沿
column-reverse: 主轴为垂直方向，起点在下沿
flex-wrap
默认情况下，项目都排在一条线上,flex-wrap属性定义如果一条线排不下，可以换行
nowrap(默认) 不换行
wrap: 换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-row
该属性是flex-direction属性和flex-warp属性的简写
justify-content
该属性定义了项目在主轴上的对齐方式
属性值
对齐方式
flex-start(默认)
左对齐
flex-end
右对齐
center
居中
space-between
两端对齐，间隔相等
space-around
每个项目两侧的间隔都相等
align-items
该属性定义项目在交叉轴上如何对齐
属性值
对齐方式
flex-start
交叉轴起点对齐
flex-end
交叉轴终点对齐
center
交叉轴 中点对齐
baseline
项目的第一行文字是基线对齐
stretch（默认值）
如果项目未设置高度或者设为auto，将占满整个容器
align-content属性
该属性定义了多跟轴线的对齐方式，如果项目只有一根轴线则不起作用
属性值
对齐方式
flex-start
与交叉轴的起点对齐
flex-end
与交叉轴的终点对齐
center
与交叉轴的中点对齐
space-between
与交叉轴的两端对齐，轴线之间间隔平均分布
space-around
每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)
轴线占满整个交叉轴
项目的属性一下有6个属性可以设置在项目中
order
flex-grow
flex-shrink
flex-basis
flex
align-flex
order属性
order属性定义了项目的排序顺序。数值越小，排列越靠前
.xxx{
order: 