CSS中的flex布局

最新推荐文章于 2025-06-02 18:23:19 发布

转载最新推荐文章于 2025-06-02 18:23:19 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex布局

转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

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

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

基本概念

使用flex布局的元素称为“容器”（flex container），子元素称为”项目“（flex item）

语法

.box {
    display: flex;
}

特殊的，Webkit 内核的浏览器，必须加上-webkit前缀。

.box {
    display: -webkit-flex;
    display: flex;
}

用一张图来展示一个使用flex布局的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BD06GS8t-1583728198671)(C:\Users\杜广楠\Desktop\bg2015071004.png)]

容器中有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴开始的位置为 main start ，结束的位置为 main end

交叉轴开始的位置为cross start ，结束的位置为 cross end

项目中水平的称为main size，垂直的称为cross size

容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

决定了主轴的方向，项目按此方向排列

有4个值
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在顶部
- column：主轴为垂直方向，起点在底部
- initial：该属性为默认值
- inherit：继承父元素
flex-wrap
- nowrap（默认值）：不换行
- wrap：换行
- wrap-reverse：换行，需要换行的项目出现在上方
flex-flow

flex-direction和flex-wrap的缩写

例：
```
.box {
    flex-flow: row wrap;
}
```
justify-content

项目在主轴上的对齐方式
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目间隔相等
- space-around：项目两侧间隔相等，项目到边框距离为项目间的一半
align-items

项目在交叉轴上的对齐方式
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：项目的第一行文字的基线对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器
align-content

定义多根轴线的对齐方式，如果只有一根轴线，则不起作用。就是该属性适用于有多行项目的felx容器，。
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴终点对齐
- content：与交叉轴中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
- stretch（默认值）：轴线占满整个交叉轴

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order
项目的排列顺序，数值越小，排列越靠前，默认值为0
flex-grow

项目的放大比例，默认为0
flex-shrink

项目的缩小比例，默认值为1
flex-basis

分配多余空间前，项目占据的主轴空间，默认值auto
flex

是flex-grow，flex-shrink，flex-basis的缩写，默认值为0 1 auto

有两个快捷值，auto（0 1 auto）和none（0 0 auto）
align-slef

允许项目和其他项目对齐方式不一样，默认值auto