简单总结一下Flex布局

最新推荐文章于 2025-04-10 17:21:46 发布

小刘不知道叫啥

最新推荐文章于 2025-04-10 17:21:46 发布

阅读量1.5k

点赞数 14

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_40710412/article/details/139132138

版权

css 专栏收录该内容

6 篇文章

订阅专栏

flex 布局在日常开发的过程中是非常常用的了，相较于传统的流式布局，flex可以更加灵活的设置布局内元素的排布和大小。通常我们可以使用flex布局做出以下的效果：

元素的水平排布
元素的水平/垂直居中
子元素宽度/高度的等分

开启flex布局

flex布局的开启方式很简单，使用display: flex 或者 display: inline-flex即可，其区别是，前者为“块级弹性盒子” 后者为 “行内弹性盒子” 即外层容器盒子是块级还是行内级。我们更加常用的还是块级弹性盒子 display: flex 。

术语

flex布局主要围绕两类盒子展开

1. 外层的容器盒子 flex-container

2. 内层的flex元素，即 flex-item

其中，flex-item不严格区分行内/块你只要把他当成是flex的子元素即可，其宽度width高度height默认都为auto，表现为包裹内容大小（类似于行内元素的宽高为自动包裹内容）

主轴和交叉轴

主轴（main axis），默认横向，即从左到右，行内元素布局的方向，子元素按照主轴的方向排列。
交叉轴 (cross axis)，和主轴垂直的方向，默认从上到下，即块元素排布的方向
主轴和交叉轴的方向都可以设置
mian-start为主轴的起点，main-end为主轴的终点，main-size为主轴长度
cross-start为交叉轴七点，cross-end为交叉轴终点，cross-size为交叉轴的长度

弹性布局属性

我们通常使用弹性布局的属性来调整弹性盒子内部元素的排布和大小，其属性可以归为两类，一类是写在弹性盒子容器(flex container)上的属性，一类是写在子元素（flex-item）上的属性

flex-container 属性

flex-direction

flex-direction控制主轴的方向，其默认值为 row，即横向排列（以行的方向排列 )

row横向（默认）
row-reverse (横向反转【交叉轴方向不变】)
column 列向下
column-reverse 列向上

flex-wrap 包裹

flex-wrap 用来设置，当容器内的子元素超出容器的范围后，是否换行

1. nowrap 不换行（默认值），默认情况下，flex-item的flex-shrink属性为1，当子元素的宽度超出容器宽度时，会自动缩小以保证子元素宽度不超出容器宽度。所以在flex布局中，设置的width和flex-item的最终宽度并不一定一致。

2. wrap 换行，即超出容器宽度会自动换行显示

3. wrap-reverse 换行，但是超出宽度后会向反方向换行

flex-flow 简写属性

flex-flow是flex-direction和flex-wrap的简写属性，如：

flex-flow: row nowrap;

表示主轴横向，不换行。

justify-content 主轴对齐

justify-content 表示子元素沿主轴方向对齐的方式，其属性值如下：

Flex-start：默认沿着主轴开始的地方对齐从main-start开始对齐
Flex-end: 从主轴结束的方向开始对齐与main-end开始对齐
center: 居中对齐
Space-between 靠两边中间均匀分布先放两边
Space-around 等分其中两遍距离main-start main-end的距离是 flex item之间距离的一半
Space-evenly 等分所有距离都是等分包括两遍和中间的都是等分 (evenly均分)

align-items 交叉轴单行对齐

align-items 决定了，在单行元素的情况，如flex-wrap: nowrap 或者元素总长度不超出容器的情况下，元素在交叉轴上的对齐方式

1. stretch 占满整个交叉轴，可以理解为fill-available, 类比块元素在width:auto的默认情况下，会沾满整个宽度一样

2. normal 默认，效果和stretch一样，但是要注意，如果flex-item显式设置了高度/宽度，则在normal/stretch的情况下也无法达到fill-available的效果

3. Flex-start 在cross-start开始对齐

4. Flex-end 在cross-end开始对齐

5. center 剧中对齐，这也是实现水平/垂直居中的方法

6. baseline 根据基线对齐

说到基线baseline你也许会想到vertical-align的baseline默认值，但是这里和vertical-align不同的是：

vertical-align如果是行内块或者是替换元素，如果有文本则基线为最后一行文本的基线，无文本则是元素底边

而align-items的baseline有所不同，如果flex-item存在文本，则以第一行文本的基线作为item的基线，如果不存在文本，则使用元素的底边，这里需要区分。