伸缩容器
开启了flex的元素
- 给元素设置:
display:flex或display:inline-flex该元素就为改变伸缩容器 display:inline-flex很少使用,因为可以给多个可以伸缩的父容器,也设置为伸缩容器- 一个元素可以同时是伸缩容器和伸缩项目
伸缩项目
伸缩容器所有子元素自动成为了:伸缩项目
- 仅伸缩容器的子元素成为了伸缩项目,孙子元素等后代,不会是伸缩项目
- 无论是原来的哪种元素,一旦成了伸缩项目,全部会”块状化”
主轴与侧轴
主轴:伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边起点,右边终点) 侧轴:与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边起点,下边终点)
主轴方向
flex-direction
常用值:
- row:主轴方向水平从左到右 —默认值
- row-reverce:主轴方向水平从右到左
- column:主轴方向垂直从上到下
- column-reverce:主轴方向垂直从下往上
改变了主轴的方向,侧轴方向也随之改变
主轴换行方式
flex-wrap
常用值:
-
nowrap:默认值,不换行 -
wrap:自动换行,伸缩容器不够不够自动换行 -
wrap-reverse:反向换行
主轴方向和换行复合属性
没有顺序要求
flex-flow:flex-direction flex-wrap;
主轴对齐方式
justify-content
属性值:
-
flex-start:主轴起点对齐 —默认值 -
flex-end:主轴终点对齐 -
center:居中对齐 -
space-between:均匀对齐,两端对齐(最常用) -
space-around:均匀分别,两端距离是中间距离的一半 -
space-evenly:在侧轴上完全平分 -
strech:占满整个侧轴 —默认值
侧轴对齐方式
单行
align-items
属性值
-
flex-start:侧轴的起点对齐 -
flex-end:侧轴的终点对齐 -
center:侧轴的中点对齐 -
baseline:伸缩项目的第一行文字的基线对齐 -
stretch:如果伸缩项目未设置高度,将占满整个容器的高度 —默认值
多行
align-content
属性值
-
flex-start:与侧轴的起点对齐 -
flex-end:与侧轴的终点对齐 -
center:与主轴的中点对齐 -
space-between:与侧轴两端对齐,中间平均分布 -
space-around:项目间的伸缩距离相等,比边缘大一倍 -
space-evenly:在侧轴上完全平分 -
strech:占满整个侧轴 —默认值
主轴的基准长度
flex-basis如果主轴横向:替代宽度;主轴纵向;替代高级
作用:浏览器根据整个属性设置的值,计算主轴上是否右多余的空间;默认值auto,即:伸缩项目的宽和高
伸缩性
伸
flex-grow定义伸缩项目的放大比例,默认为0,即:纵使主轴存在剩余空间,也不拉伸(放大)
若所有项目的flex-grow值为1,他们将等分剩余空间
若项目分别设置了flex-grow值,则是该项目与所有flex-grow的值加起来的比例
缩
fkex-shrink定义了项目的压缩比例,默认为1,即:空间不足,该项目会缩小
- 计算分母
flex-shrink压缩比例
(项目1宽项目1m)+(项目2宽项目2m)=总宽度 - 计算比例 项目一:(项目1宽项目1m)/总宽度=比例值1项目二:(项目2宽项目2m)/总宽度=比例值2
- 计算了最终收缩大小 项目一需要收缩:比例值需要缩小的总宽项目二需要收缩:比例值需要缩小的总宽
flex复合属性
复合了flex-grow,flex-shrink,flex-basis这三个属性
flex:1 1 auto,则可简写为:flex:auto
flex:1 1 0,则可简写为:flex:1
flex:0 0 auto,则可简写为:flex:none
flex:0 1 auto,则可简写为:flex:0 none —即flex初始值
项目排序
order属性定义项目的排序顺序;数值越小,排名越靠前
单独对齐
align-self
可以单端调整某个项目的对齐方式
默认值为auto,表示基础父元素的align-items属性