设置为弹性盒:
display:flex; 块级弹性盒
display:inline-flex; 行级弹性盒 (相当于行级块)
flex-direction-作用:描述弹性盒主轴方向(项目的排列方向)
flex-direction: row; 横向【默认从左向右】
flex-direction: row-reverse; (右对齐),从后往前排,最后一项排在最前面
flex-direction: column 纵向排列;(默认从上向下)
flex-direction: column-reverse; 与column反向
<!--
1.设置为弹性盒之后,项目按主轴方向排列(默认从左向右)
2.弹性盒项目本身大小为自动时,默认横向内容撑开,纵向默认拉伸占满容器
-->
flex-direction-作用:
justify-content: flex-start; 起始点对齐——默认值。
justify-content: flex-end; 终点对齐——弹性项目向行尾紧挨着填充。
justify-content: center; 居中对齐
justify-content: space-between; 容器的剩余空间在项目之间
justify-content: space-around; 项目两侧拥有相等的剩余空间,项目之间是项目与容器之间的2倍
justify-content: space-evenly; 项目与容器,项目与项目之间拥有相等的空间
align-items-设置侧轴方向的对齐方式:
align-items: flex-start; 侧轴起始位置对齐
align-items: flex-end; 侧轴末端位置对齐
align-items: center; 侧轴居中对齐
align-items: baseline; 基线对齐
align-items: stretch; 拉伸占满侧轴——指定项目在侧轴方向的大小为'auto'时有效 默认值
flflex-wrap-指定弹性盒子的子元素换行方式:
flex-wrap:
nowrap -不换【默认值】
wrap 换行(起始点在上)
wrap-reverse 与 wrap反向 (起始点在下)
align-content-多根轴线的对齐方式:
align-content: stretch; 默认 水平方向
align-content: flex-start; 左对齐
align-content: flex-end; 右对齐
align-content: center; 居中对齐
align-content: space-between; 两端对齐
align-content: space-around; 容器剩余空间在行与行两侧,行与行之间是行与容器之间的两倍
align-content: space-evenly; 行与行之间,行与项目之间容器的剩余空间均等分布
弹性盒项目属性:
/* 默认值为0,值越大排列越靠后 */ order:1;
align-self 属性-设置项目自身在侧轴上的对齐方式:
align-self: 单个项目在侧轴上的对齐方式
align-self: 控制所有项目在侧轴上的对齐方式
align-self: auto; 自动——为元素的父元素的'align-items'值,
align-self: flex-start; 起始位置对齐
align-self: flex-end; 终点位置对齐
align-self: center; 居中对齐
align-self: baseline; 基线对齐。
align-self: stretch; 拉伸占满侧轴——侧轴大小为auto时有效
flex-简写:
作用:用于指定弹性子元素如何分配空间。
flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
flex-grow-作用增长比率:
默认值0 表示即使容器有剩余空间也不增长
数值,表示份数
flex-basis-基准值(参与计算的最终值):
<!--
没有定义基准值,以当前元素宽度、高度为准
如果定义了基准值,以基准值为准(flex-basis的优先)
计算项目的最终大小
计算剩余空间
计算增长以后的值
计算收缩以后值
-->
<!--
计算剩余空间
400-50-100-100 = 150
1份的大小:150/5 = 30
计算增长以后的大小:
50 + 30 = 80
100 + 30 *2 = 160
-->
<!--
剩余空间
400-100-100-100 = 100
100/5=20
-->
<!--
flex-grow:
默认值0 表示即使容器有剩余空间也不增长
数值,表示份数
-->
flex-shrink-定义项目的收缩比率:
<!--
flex-shrink:
收缩比率
容器空间不足时,才有效
默认值:1 表示当容器空间不足时收缩
0 表示不收缩
-->