首页 > 代码库 > flex布局
flex布局
所有的元素都可以指定为flex布局,采用了flex布局的元素,被称作为是flex容器,先来看看这些容器的属性
1)容器的6个属性
1)flex-direction
2)flex-wrap
3) flex-flow
4)justify-content
5)align-items
6)align-content
下面再来分别的介绍这些属性
1)flex-direction
决定了元素的排列的方向,是按照横着还是竖着排
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
2)flex-wrap
这个属性的作用呢,就是用来换行的,当内部元素的大小超过了父元素大小,这个时候应该如何换行呢
nowrap
(默认):不换行。
wrap
:换行,第一行在上方。
wrap-reverse
:换行,第一行在下方。
3)flex-flow
这个属性是flex-direction和flex-wrap的简写形式,它的默认值是row nowrap
4)justify-content
上面介绍的都是一些基础的属性,下面开始有趣的就来了,这个justify-content定义了项目在主轴上的对其的方式
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔相等,一前一后,其余的在中间
space-around:等间距对其,最前和最后的两个与边框的距离是等间距的一半
5)align-items
这个属性定义了在交叉轴上的对齐方式
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的终点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目没有设置高度或者高度设置为了auto,将占满整个容器的高度。
6)align-content
该属性定义了多根轴线上的对齐方式,如果项目只有一根轴线,则该属性不起作用
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴的两端对齐,轴线之间的间隔平均的分布
space-around:每个轴线的两侧相等,前后的距离边框的间隔减半
stretch(默认值):轴线占满整个交叉轴
2)说完了容器的布局,下面来接着聊聊容器里面项目的布局,项目的6分属性如下
1)order
2)flex-grown
3)flex-shrink
4)flex-basis
5)flex
6)align-self
接下来详细的理解这6个属性,掌握它们的用法
flex布局