/*
flex布局:
弹性盒布局,flex容器,子元素flex项目
默认两根轴:水平轴和垂直交叉轴,项目默认沿主轴排列
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
*/
/*
一、容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
*/
/*
1、flex-direction : 决定主轴方向(项目的排列方向)
row : 默认值,主轴水平,起点左端
row-reverse : 主轴水平,起点右端
column : 主轴垂直,起点上端
column-reverse : 主轴垂直,起点下端
*/
/*
2、flex-wrap : 各项目是否有换行
nowrap : 默认值,不换行
wrap : 换行
wrap-reverse : 换行,第一行在下方
*/
/*
3、flex-flow : 是flex-direction 和 flex-wrap 的简写 默认值 row wrap
*/
/*
4、justify-content : 定义项目在主轴上的排布方式
flex-start : 左对齐
flex-end : 右对齐
center : 居中
space-betwoon : 两端对齐,项目之间间隔相等
space-around : 每个项目间隔相等,所以项目之间间隔比两端间隔大一倍
*/
/*
5、align-items : 定义项目在交叉轴上如何对齐
flex-start : 上对齐
flex-end : 下对齐
center : 垂直居中
baseline : 项目的第一行文字基线对齐
stretch : 默认值,如果项目为设置高度或者auto,将沾满整个容器高度
*/
/*
6、align-content : 定义了多根轴线的对齐方式(约束交叉轴方向上)。如果只有一根轴线,不起作用
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
*/
/*
二、项目上的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
*/
/*
1、order : 定义项目的排列顺序。数值越小,越靠前,默认值 0
*/
/*
2、flex-grow : 定义项目放大比例。默认0,即如果存在剩余空间,也不放大
如果所有项目flex-grow:1,则平分剩余空间,按照占比分空间
*/
/*
3、flex-shrink : 定义项目缩小比例。默认1,即空间不足,项目默认缩小
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效
*/
/*
4、flex-basis : 定义了在分配多余空间之前,项目占据的主轴空间。
可以设为跟width或height属性一样的值固定px,项目占据固定空间
*/
/*
5、flex : 是flex-grow、flex-shrink、flex-basis 简写,默认:0 1 auto,后两个属性可选值
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
*/
/*
6、align-self : 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items,默认auto。
flex-start : 上对齐
flex-end : 下对齐
center : 垂直居中
baseline : 项目的第一行文字基线对齐
stretch : 默认值,如果项目为设置高度或者auto,将沾满整个容器高度
*/
flex布局-所有属性整理
于 2019-12-18 15:04:12 首次发布