关于倒在flex上的那些事

  • A+
所属分类:Web前端
摘要

首先每个容器都可以开启弹性布局:display:flex或者display:inline-flex,如果浏览器兼容加上-webkit

首先每个容器都可以开启弹性布局:display:flex或者display:inline-flex,如果浏览器兼容加上-webkit

理解两个概念:容器和项目
容器即为你要在什么地方开启弹性布局,就是一般为外层的div
项目即为你想设置分布位置的子div

即然分为父和子,那么两者都有不同的属性才对

容器:
flex-direction: row | row-reverse | column | column-reverse; ---> 主轴方向
flex-wrap:nowrap | wrap | wrap-reverse; ---> 项目是否换行
flex-flow:相当于flex-direction + flex-wrap 默认值为row nowrap
justify-content:flex-start | flex-end | center | space-between | space-around; ---> 主轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch; ---> 垂直轴对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch; ---> 多根轴线的对齐方式

项目:
order: ; ---> 排列顺序
flex-grow: ; ---> 放大比例
flex-shrink: ; ---> 缩小比例
flex-basis: | auto; ---> 占据剩余空间,默认auto,本来大小
flex:flex-grow + flex-shrink + flex-basis
align-self: auto | flex-start | flex-end | center | baseline | stretch; ---> 单个设置,覆盖align-items

引用:阮一峰大神的flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html