跳到主要内容位置

CSS flex 布局入门教程

Flexbox 是一维布局方式,按行或按列。它解决了元素对齐、分布和响应式的问题。

开启 flex

开启 flex 布局只需要给外层容器设置

display: flex

它的直接子元素就会默认按行进行排列。

在行模式下,有一条水平方向的主轴和一条垂直方向的交叉轴。子元素会从flexbox 容器左上角开始,从左到右依次排列,即主轴最左边,交叉轴的最上边。

改变主轴布局

改变主轴方向的布局使用justify-content属性,例如:

靠右对齐

justify-content: flex-end;

居中对齐:

justify-content: center;

平分空间:

justify-content: space-evenly;

两端对齐:

justify-content: space-between;

改变交叉轴布局

改变交叉轴方向的布局使用align-items属性,例如:

靠下对齐:

align-items: flex-end;

居中对齐:

align-items: center;

列模式

在列模式下,主轴变成了交叉轴、交叉轴变成了主轴,其他的设置项跟行模式一样。

比例

非固定尺寸的子元素,可以通过设置 flex 属性调整空间的占比。默认都是1,平分空间,如果把第二个元素设置成:

flex: 2

则会占据2/3的空间。

结束

好了,这就是今天的2分钟掌握 CSS flexbox 布局,你学会了吗,有问题欢迎在评论区留言,我是峰华,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买