flex布局

294 阅读2分钟

四大概念

容器、项目、主轴、交叉轴

容器:如果在一个盒子上面,设置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:单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式