论坛 › 教程分享 › Flex布局

陈公子的话 发表于 2021-3-1 18:55:18

Flex布局

本帖最后由 小陈 于 2021-3-1 18:56 编辑

## Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。


任何一个容器都可以指定为 Flex 布局。

!(data/attachment/forum/202103/01/183553ga87asazlaj37pfa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")

行内元素也可以使用 Flex 布局。

!(data/attachment/forum/202103/01/183604xcwwmk871w9wm7k9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


注意，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。



## 基本概念


采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。





容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。

项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。



## 容器的属性

!(data/attachment/forum/202103/01/183724r6685zgxi45gq82z.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")



首先我们说一下flex-direction，这一属性决定的主轴的方向

!(data/attachment/forum/202103/01/183851oxoby6x6uxvxqvdu.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


!(data/attachment/forum/202103/01/183901hcs99ffffsvf7a8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")



flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。

那么如果一条轴线排不下，如何换行。

!(data/attachment/forum/202103/01/184016dhd4fhgp8zp07t38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")

`nowrap`（默认）：不换行。

`wrap`：换行，第一行在上方。

`wrap-reverse`：换行，第一行在下方。


flex-flow

`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

!(data/attachment/forum/202103/01/184058nppmlqlfjm7ac467.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


`justify-content`


`justify-content`属性定义了项目在主轴上的对齐方式。

!(data/attachment/forum/202103/01/184353dggaua5wu45av494.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


!(data/attachment/forum/202103/01/184715bdgp6axuyfysyfjf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


`align-items`

`align-items`属性定义项目在交叉轴上如何对齐。

!(data/attachment/forum/202103/01/184819jarszcaht0atplf4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")

!(data/attachment/forum/202103/01/184827kieib99zoexxrobj.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


`align-content`

`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

!(data/attachment/forum/202103/01/184858p6282x38t8p8ppvi.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")

!(data/attachment/forum/202103/01/184904y740lay5f0zuf51f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


## 常见布局的Flex写法


http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

陈公子的话 发表于 2021-3-1 19:03:33

https://blog.csdn.net/lc941015/article/details/79098933?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=b77e0d2a-2d6e-48ca-be11-e3dc4fd6071d&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control

查看完整版本: Flex布局