css之flex布局

一、flex布局

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

二、基本概念

2.1 主轴和交叉轴

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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。项目默认沿主轴排列。

2.2 contianer属性
2.2.1 flex-direction

flex-direction属性决定主轴的方向,默认是row,水平从左到右排列

css 复制代码
 .box {
   flex-direction: row | row-reverse | column | column-reverse;
 }
2.2.2 flex-wrap

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

css 复制代码
 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

wrap-reverse : 换行,第一行在下方。

2.2.3 justify-content

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

css 复制代码
 .box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

space-between 两端对齐,项目之间的间隔都相等

2.2.4 aligin-items
css 复制代码
 .box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

stretch: 如果项目未设置高度或设为auto,将占满整个容器的高度

2.3 item属性

2.3.1 flex-grow

flex-grow 定义放大比例,默认为0,即如果存在剩余空间,也不放大。若所有item都设置为1,则所有item大小相等。.

2.3.2 flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

相关推荐
zhanshuo4 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang5 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil7 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录13 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672214 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少18 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫