容器:
*
1.justify-content主轴对齐方式:*
Flex-start左对齐
Flex-end 右对齐
Space-between 每两个项目之间的距离相等
space-around 每一个两侧距离相等
Space-evevnly 每两个项目之间距离与边沿的项目距离容器之间的距离相等
*2.align-items 交叉轴对齐方式
stretch默认当项目未设置高度时或auto时,会沾满整个父容器
Center 居中对齐
flex-start 悬上 交叉轴起点
flex-end 与交叉轴终点对齐 居下
baseline 与第一行文字基线对齐*
**3.flex-direction:
row 主轴为水平方向 起点在左侧 row-reverse 主轴为水平方向 起点在右侧 column 主轴为垂直方向 column-reverse 主轴为 垂直方向 起点在下侧**
4.项目换行:
nowrap 不换行
warp 换行
warp-reverse 换行第一行在下侧
5.多根轴线对齐方式align-content:
flex-start 与交叉轴的起点对齐 整体居上 flex-end 与交叉轴的终点对齐 整体居下 center整体居中
space-between 每两行之间的距离相等 space-around 每一行两侧的距离相等 space-evenly 每两行之间的距离与第一行距离容器的距离相等
项目:
1.align-self(
单个项目在交叉轴的对齐方式)auto默认继承align-items的值
stretch默认当项目未设置高度时或auto时,会沾满整个父容器
Center 居中对齐
flex-start 悬上 交叉轴起点
flex-end 与交叉轴终点对齐 居下
baseline 与第一行文字基线对齐 ;
2.order项目排列方式:值:数字(默认为0 可正可负 值越小越靠前);
3.Flex-grow :项目放大比例 默认0 值:整数大于等于0的值 父容器有剩余空间不放大 ;
4.Flex-shrink :项目缩小比例 值:默认1大于等于0 父容器空间不足的时候,等比例缩小 。 若为0 则表示不缩小;
Flex-basis:项目实际空间大小 auto;
可简写:flex :
Flex-grow 【Flex-shrink】 【Flex-basis】加中括号可写可不写。
快捷值:
1.flex:auto flex:1 1 auto;
父容器空间有剩余,等比例放大,空间不足,等比例缩小。
2. flex:none; flex:0 0 auto;
父容器空间有剩余,比放大,空间不足,不缩小。