【前端知识之CSS】flex弹性布局和grid网格布局

饭啊饭°

已于 2022-07-18 09:36:09 修改

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端知识之html+CSS 文章标签：前端 css css3

于 2022-05-12 20:55:37 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124735779

本文介绍了前端开发中的两种重要布局方式——flex弹性布局和grid网格布局。flex布局适用于一维布局，通过flex-direction调整主轴方向，justify-content和align-items控制项目对齐。grid布局则是一个二维布局系统，能方便地定义区域大小和位置，通过grid-column和grid-row指定项目位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。

一、flex弹性布局

1、flex弹性布局是什么

在这里插入图片描述
对父盒子设置成弹性布局，他的所有子元素自动成为容器成员，称为flex项目item。容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每个轴都有自己的起点和终点。

2、容器的属性

容器属性名称	属性意义	属性可能的值
flex-direction	决定item排列方向	row,row-reverse,column,column-reverse
justify-content	item在主轴上的对齐方式	flex-start,flex-end,center,space-between,space-around
flex-wrap	排列不下时，item如何换行	nowrap,wrap,wrap-reverse
align-content	侧轴上子元素的排列方式(多行)	flex-start,flex-end,center,space-between,space-around,stretch
align-items	侧轴上子元素的排列方式(单行)	flex-start,flex-end,center,space-between,space-around,stretch
flex-flow	复合属性	相当于同时设置了flex-direction和flex-wrap

flex-direction：决定主轴的方向

.container {
   
      
    flex-direction: row | row-reverse | column | column-reverse;  
}

（1）row（默认）：主轴为水平方向，起点在左端；
（2）row-reverse：主轴为水平方向，起点在右端；
（3）column：主轴为垂直方向，起点在上沿；
（4）column-reverse：主轴为垂

最低0.47元/天解锁文章

200万优质内容无限畅学