【CSS弹性盒模型 display:flex;常用参数及常见的布局】

news/2025/1/31 6:46:41/

CSS弹性盒模型

  • display:flex;常用参数
      • flex-direction
      • justify-content
      • align-items
      • flex-wrap
      • flex-flow
      • align-content
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
  • 常见的布局
      • 1. 水平居中
      • 2. 垂直居中
      • 3. 水平垂直居中
      • 4. 等分布局
      • 5. 响应式布局
      • 6. 网格布局
  • 常见的布局封装

display:flex;常用参数

display:flex; 是CSS中用于创建弹性盒子布局的属性,其常见的各种参数及用法包括:

flex-direction

指定主轴的方向,可以是row(水平方向)、column(垂直方向)等。

justify-content

定义在主轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、space-between(两端对齐,中间间隔相等)等。

align-items

定义在交叉轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、stretch(拉伸填满)等。

flex-wrap

指定如何换行,可以是nowrap(不换行)、wrap(换行,第一行在上方)、wrap-reverse(换行,第一行在下方)。

flex-flow

是flex-direction和flex-wrap的缩写,可以同时指定主轴方向和换行模式,例如flex-flow: row wrap;。

align-content

定义多行情况下的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、space-between(每行之间相等间隔)、stretch(拉伸填满)等。

order

指定弹性子元素的排列顺序。

flex-grow

定义弹性子元素的放大比例。

flex-shrink

定义弹性子元素的缩小比例。

flex-basis

定义弹性子元素的基准大小,通常是一个固定值或一个百分比。

以上是常见的display:flex;的参数及用法,还有一些其他的参数可以参考相关文档。

常见的布局

display:flex; 是 CSS 中一种强大的布局方式,以下是一些常见的 display:flex; 组合布局:

1. 水平居中

.container {display: flex;justify-content: center;
}

2. 垂直居中

.container {display: flex;align-items: center;
}

3. 水平垂直居中

.container {display: flex;justify-content: center;align-items: center;/* 或者可以使用下面这种方式 *//* align-items: stretch;align-content: center; */
}

4. 等分布局

.container {display: flex;justify-content: space-between;
}

5. 响应式布局

.container {display: flex;flex-direction: row; /* 默认值 */
}@media screen and (max-width: 768px) {.container {flex-direction: column;}
}

6. 网格布局

.container {display: flex;flex-wrap: wrap;
}/* 4列布局 */
.item {width: 25%;
}/* 3列布局 */
@media screen and (max-width: 768px) {.item {width: 33.33%;}
}/* 2列布局 */
@media screen and (max-width: 480px) {.item {width: 50%;}
}

常见的布局封装

已绑定到资源上,需要的可以自己下载


http://www.ppmy.cn/news/1009253.html

相关文章

C++中选择正确的数据类型以免发生溢出错误

C中选择正确的数据类型以免发生溢出错误 诸如 short、int、long、unsigned short、unsigned int、unsigned long 等数据类型的容量有限,如果算术运算的结果超出了选定数据类型的上限,将导致溢出。 就拿 unsigned short 来说吧,它占用 16 位内…

【云原生】Docker-Compose全方面学习

目录 1.compose简介 Compose V2 2.compose安装与下载 二进制包 PIP 安装 bash 补全命令 卸载 3.docker compose管理命令 命令对象与格式 命令选项 命令使用说明 1.compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose,您可…

k8s(七) 叩丁狼 service Ingress

负责东西流量(同层级/内部服务网络通信)的通信 service的定义 apiVersion: v1 kind: Service metadata:name: nginx-svclabels:app: nginx-svc spec:ports:- name: http # service 端口配置的名称protocol: TCP # 端口绑定的协议,支持 TCP、…

各省绿色创新效率原始数据+测算(2020-2021)

该数据集是一个分析中国各城市宗族文化的工具变量。数据包括第1大姓氏、第2大姓氏、第3大姓氏、宗族文化强度。根据2005年全国1%的人口调查数据计算。其中第1大姓氏第一大姓人口数/总人口数,宗族文化强度(第一大姓人口数第二大姓人口数第三大姓人口数)/总人口数。它…

CNN成长路:从AlexNet到EfficientNet(02)

一、说明 在~10年的深度学习中,进步是多么迅速!早在 2012 年,Alexnet 在 ImageNet 上的准确率就达到了 63.3% 的 Top-1。现在,我们超过90%的EfficientNet架构和师生训练(teacher-student)。 二、第一阶段 …

链接过程(4/13)

在一个 C 项目的编译中,编译器以 C 源文件为单位,将一个个 C 文件翻译成对应的目标文件。生成的每一个目标文件都是由代码段、数据段、BSS 段、符号表等 section 组成的。这些 section 从目标文件的零偏移地址开始按照顺序依次排放,每个段中的…

【工具使用】git基础操作1

目录 一.拉取git代码1.首次拉取命令2.使用图形化拉取代码3.Idea 开发工具拉取代码 二.查看当前状态1.查看在你上次提交之后是否有对文件进行再次修改 三.创建分支3.1.创建分支3.2.创建分支并切换至分支3.3.提交分支至远程仓 远程没有自动创建 四.查看分支4.1.查看本地分支 当前…

解决vue3+echarts关于无法获取dom宽度和高度的问题

解决vue3echarts关于无法获取dom宽度和高度的问题 近期写vue3项目,很多地方都用到了echarts,刚开始写的时候,发现图一直出不来,报错/报警内容一般有两项: Uncaught (in promise) Error: Initialize failed: invalid …