flex布局整理以及demo

Posted 2021-01-13 sefaultment

flex：

概念：

flex容器：

display:flex

flex项:

轴:水平的主轴、垂直的交叉轴

容器的属性：

1. flex-direction(决定主轴的方向、即项目的排列方向)
    1.1 row(默认值): 主轴为水平方向，起点在左端
    1.2 row-reverse: 主轴为水平方向，起点在右端
    1.3 column: 主轴为垂直方向，起点在上面
    1.4 column-reverse: 主轴为垂直方向，起点在下面

2.flex-wrap(决定如何换行，默认是对item缩放)
    2.1 nowrap(默认值)： 不换行
    2.2 warp: 换行，第一行在上方
    2.3 wrap-reverse: 换行，第一行在下方

3.flex-flow(flex-direction、flex-wrap的简写)
    3.1 <felx-direction> || <flex-wrap>

4.justify-content(item在主轴上的对齐方式)
    4.1flex-start: 左对齐
    4.2flex-end: 右对齐
    4.3center: 居中
    4.4space-between: 两端对齐,每个项目之间间隔相等
    4.5space-around: 每个项目的两侧间隔相等

5.align-items(定义项目在交叉轴上如何对齐)
    5.1strech(默认值)： 如果项目未设置高度或为auto，讲占满容器高度
    5.2flex-start: 交叉轴的起点对齐
    5.3flex-end: 交叉轴的终点对齐
    5.4center: 交叉轴的中点对齐
    5.5baseline： 项目的第一行文字的基线对齐

6.align-content(定义多根轴线，多行)

项目属性

1.order(定义项目的排列顺序，值越小，排列越靠前，默认为0)
    1.1order: <integer>

2.flex-grow(定义项目的放大比例，默认为0，如果存在剩余空间，也不放大)
    2.1flex-grow: <default> 

3.flex-shrink(定义项目的缩小比例，默认为1，即空间不足时，会缩小该项目)
    3.1flex-shrink: <number>

4.flex-basis(定义分配多余空间前，项目占据的主轴空间，)
    4.4flex-basis：<length> | auto(默认值)

5.flex(flex-grow、flex-shrink、flex-basis简写)
    5.1auto(1,1,auto)
    5.2none(0,0,auto)

6.align-self(设置单个项目的对齐方式，可覆盖align-items属性)
    6.1auto(默认值，继承父元素的align-items)
    6.2其余与algin-items一致

flex详细讲解

flex应用例子