弹性布局

Posted 2021-01-22 zhaoyusheng

以下6个属性设置在容器上：
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-item:(在交叉轴上如何对齐)：flex-start:（交叉轴起点对齐），flex-end(交叉轴终点对齐)，center(居中对齐)，stretch(默认值；填充)，baseline(项目的第一行文字的基线对齐)
align-content: flex-start(与交叉轴起点对齐)，flex-end（与交叉轴终点对齐）center(与交叉轴中点对齐)，stretch(默认值，轴线占满整个交叉轴)，space-between(两端对齐)
space-around(每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍)
项目上的属性
order:定义项目的排列顺序，数值越小，排列越靠前，
flex-grow:属性定义项目的放大比例，默认为0，存在剩余空间也不放大，
flex-shrink:属性定义项目的缩小比例，默认为1
flex-basis:设置项目大小，比如350px
flex:flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self: 可以允许单个项目与其他项目有不一样的对齐方式，默认值为auto，表示继承父元素，;

 

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html；