首页 > 代码库 > 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布局