四大概念
容器、项目、主轴、交叉轴
容器:如果在一个盒子上面,设置display:flex,那么这个盒子就是一个容器。
项目:容器的直接子元素,叫项目。
主轴:在容器中,项目默认是按主轴方向排列,默认是从左向右排列。
交叉轴:与主轴垂直的那个轴。
容器相关的属性:
flex-direction:改变主轴方向
row(左至右)
column(上至下)
row-reverse(右至左)
column-reverse(下至上)
flex-wrap:如何换行。
wrap(换行)
nowrap(不换)
wrap-reveal(换行第一行在下)
flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content:处理富余空间 。
flex-start:富裕空间在右,左对齐。
flex-end:在左,右对齐。
center:在两边。此时排列居中 。
space-between:富裕空间在中间,两端对齐。
space-around:相当于每个项目加了一个相等的margin。
align-items: 定义项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content : 当有多根主轴时,多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间 隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
项目相关的属性:
order:是用来改变项目的顺序的
flex-grow:让某个项目生长
flex-shrink:让某个项目压缩
flex-basis:项目在主轴上占据的大小
flex:上面几个属性的简写方式
align-self:单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式