容器属性
- display:flex
- flex-direction
设置弹性盒模型排列方式
默认值 row row 横向 row-reverse 横向的反向 column 纵向 column-reverse 纵向的反向
flex-wrap
设置交叉轴换行的方向 默认 nowrap 不换行 wrap 换行 wrap-reverse 换行的反向
复合样式为
- flex-flow:flex-direction flex-wrap
- justify-content
设置主轴上的对齐方式
flex-start flex-end center space-between space-around 依次为以 (主轴起点对齐),(终点对齐),(居中对齐),(两端对齐同时两端没间距, 中间的元素均分对齐),(两端对齐同时两侧的间距为中间间距的一半)
align-items
定义项目在交叉轴上的对齐方式 (注意: 单行)
flex-start flex-end center baseline strecth 依次为 (交叉轴起点对齐),(终点对齐),(居中对齐),(基线对齐),(默认对齐, 项目没有定义宽高的时候, 按照外部盒子的高度延伸, 如果定义了就按照项目的内容撑开), 所有的如果定义了就按照项目的内容撑开.
align-content
定义项目在交叉轴上的对齐方式 (注意: 多行)
flex-start flex-end center baseline strecth 与上类似, 默认值也是 stretch
项目属性
order
: 项目的排序, 默认值为 0, 序号越小越靠前
flex-shrink
设置项目缩小的比例, 默认是为 1, 当容器空间不足时会缩小 0 为不缩小
flex-grow
: 设置项目放大的比例, 0 不放大, 1 放大
flex-basis
从主轴上空间分配宽度 默认值为 auto 可以为像素, 百分比, 50% 即为主轴上分配百分之 50, 一半
复合属性为
flex:flex-grow flex-shrink flex-basis 例如
flex:1 1 auto 既放大又缩小, 还自动 ==flex:auto
flex:0 0 auto 既不放大也不缩小, 还自动 ==flex:none
align-self
设置单个项目交叉轴的对齐方式 flex-start flex-end center baseline strecth align-self 与 align-items 作用一样 不同的是 align-self 对单个设置, 且 align-self 会覆盖 align-items 的设置
来源: http://www.qdfuns.com/article/50984/57b055a7bd2d492ab05d6bd0a24da4ec.html