浅析flex及常用语法整理

我就是我 2023-09-29 13:23 14阅读 0赞

**目录**

1.flex-direction: 调整主轴方向

2.justify-content主要用来设置主轴方向的对齐方式

3.align-items用于调整侧轴的对齐方式

3.flex-wrap属性控制flex容器是单行或者多行,默认不换行

4.align-content用来设置多行的flex容器的排列方式

--------------------

> 在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。
> 
> flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

--------------------

#### 1.flex-direction: 调整主轴方向 ####

row：主轴方向为水平向右
    column：主轴方向为竖直向下
    row-reverse:主轴方向为水平向左
    column-reverse:主轴方向是竖直向上。

--------------------

#### 2.justify-content主要用来设置**主轴方向的对齐方式** ####

flex-start: 弹性盒子元素将向起始位置对齐
    flex-end: 弹性盒子元素将向结束位置对齐。
    center: 弹性盒子元素将向行中间位置对齐
    space-around: 弹性盒子元素会平均地分布在行里
    space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

--------------------

#### 3.align-items用于调整**侧轴的对齐方式** ####

flex-start： 元素在侧轴的起始位置对齐。 
    flex-end： 元素在侧轴的结束位置对齐。
    center： 元素在侧轴上居中对齐。
    stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

--------------------

#### 3.flex-wrap属性控制flex容器是单行或者多行,默认不换行 ####

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
    wrap： 当宽度不够的时候，会换行。

--------------------

#### 4.align-content用来设置多行的flex容器的排列方式 ####

flex-start： 各行向侧轴的起始位置堆叠。 
    flex-end： 各行向弹性盒容器的结束位置堆叠。
    center： 各行向弹性盒容器的中间位置堆叠。
    space-around： 各行在侧轴中平均分布。 
    space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
    stretch：拉伸，不设置高度的情况下。

> 可参考 [flex布局教程][flex]

[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html