当前位置： 首页 > news >正文

【css3】06-css3新特性之网页布局篇

news 2026/2/7 13:29:02

目录

伸缩布局或者弹性布局【响应式布局】

 1 设置父元素为伸缩盒子

2 设置伸缩盒子主轴方向

3 设置元素在主轴的对齐方式

4 设置元素在侧轴的对齐方式

5 设置元素是否换行显示

6 设置元素换行后的对齐方式

7 效果测试原码

伸缩布局或者弹性布局【响应式布局】

 1 设置父元素为伸缩盒子


  ☞ 设置父元素为伸缩盒子【直接父元素】
        display： flex
      为什么在伸缩盒子中，子元素会在一行上显示？
             1. 子元素是按照伸缩盒子中主轴方向显示
             2. 只有伸缩盒子才有主轴和侧轴
             3. 主轴： 默认水平从左向右显示
             4。 侧轴： 始终要垂直于主轴

样例：一个box父盒子直接包含四个子盒子，且子盒子可能会超出父盒子（如图1），当设置父盒子为伸缩盒子display： flex后，四个盒子会在一行上显示，且不会超出父盒子（如图2）

      

2 设置伸缩盒子主轴方向

  ☞ 设置伸缩盒子主轴方向（flex-direction）

1、子项在容器中水平排列，从左到右（在默认的文档流中）。主轴是水平的。
    flex-direction: row; 【默认值】（图1）

 2、子项在容器中水平排列，但方向是从右到左。主轴是水平的，但方向是相反的。
    flex-direction: row-reverse; （图2）

3、子项在容器中垂直排列，从上到下。主轴是垂直的.
    flex-direction: column; （图3）

4、子项在容器中垂直排列，但方向是从下到上。主轴是垂直的，但方向是相反的。
    flex-direction: column-reverse; （图4）

   

  

3 设置元素在主轴的对齐方式


  ☞ 设置元素在主轴的对齐方式( justify-content)
        /* 设置子元素在主轴方向的对齐方式 */

1、子项向主轴的起始位置对齐。例如，当 flex-direction 为 row 时，子项会左对齐。
    justify-content: flex-start;

2、子项向主轴的结束位置对齐。例如，当 flex-direction 为 row 时，子项会右对齐。
     justify-content: flex-end;

3、子项在主轴上居中对齐。无论 flex-direction 是 row 还是 column，子项都会在其中心位置。
    justify-content: center;

4、子项在主轴上均匀分布，首个子项位于主轴的起始位置，最后一个子项位于主轴的结束位置，而剩余的空间等分地分布在其他子项之间。
    justify-content: space-between;

5、子项在主轴上均匀分布，每个子项两侧的空白空间相等。这意味着子项之间的间隔和子项与容器边缘的间隔都是相等的。但是，请注意，子项之间的间隔实际上是两侧间隔的一半，因为两侧的间隔分布在子项两侧的空白区域中
    justify-content: space-around;

    

   

4 设置元素在侧轴的对齐方式

  ☞ 设置元素在侧轴的对齐方式 （align-items）

1、子项在交叉轴的起始位置对齐。例如，当 flex-direction 为 row 时，子项会向容器的顶部对齐（如果容器的 height 足够大以显示多个行）
            align-items: flex-start;

2、子项在交叉轴的结束位置对齐。例如，当 flex-direction 为 row 时，子项会向容器的底部对齐（如果容器的 height 足够大以显示多个行）。
            align-items: flex-end;

3、子项在交叉轴上居中对齐。无论 flex-direction 是 row 还是 column，子项都会在其交叉轴的中心位置。
            align-items: center;

4、如果子项未设置高度或设为 auto，并且容器在交叉轴上有额外的空间，子项将占据容器的整个高度（或宽度，如果 flex-direction 是 column）。如果子项本身有高度设置，则忽略这个值，子项将保持其原有的高度。
            align-items: stretch;/* 默认值 */  拉伸

   

   

5 设置元素是否换行显示

  ☞ 设置元素是否换行显示（flex-wrap）
          1. 在伸缩盒子中所有的元素默认都会在一行上显示（跟不换行的效果一致）
          2. 如果希望换行：
            flex-wrap: wrap | nowrap;

  

6 设置元素换行后的对齐方式

  ☞ 设置元素换行后的对齐方式（ align-content）

1、所有行都向交叉轴的起始位置对齐
            align-content: flex-start;

2、所有行都向交叉轴的结束位置对齐
            align-content: flex-end;

3、所有行在交叉轴上居中对齐
            align-content: center;

4、行在交叉轴上均匀分布，每行两侧的空白空间相等。但是，请注意，行之间的间隔和行与容器边缘的间隔并不完全相等，因为两侧的间隔分布在行两侧的空白区域中
            align-content: space-around;

5、行在交叉轴上均匀分布，第一行位于交叉轴的起始位置，最后一行位于交叉轴的结束位置，而剩余的空间等分地分布在其他行之间
            align-content: space-between;

6、如果容器在交叉轴上有额外的空间，并且行没有指定大小或设为auto，那么行将沿着交叉轴方向扩展以填充容器。但是，如果行本身设置了大小（如height或width），那么stretch值将被忽略，行将保持其原有的大小。
            align-content: stretch; /* 换行后的默认值 */

    
  

样式6效果align-content: stretch;每个子盒子设置了宽高；将每个子盒子的高注释，效果2

  

7 效果测试原码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {width: 400px;height: 400px;border: 1px solid red;/* 设置父元素为伸缩盒子 */display: flex;/* 设置子元素在主轴方向的对齐方式 *//* justify-content: flex-start; *//* justify-content: flex-end; *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; *//* 设置主轴方向 */flex-direction: row;/* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; *//* 设置侧轴对齐方式 *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: center; *//* 默认值 */align-items: stretch;flex-wrap: wrap;/* 设置换行后的对齐方式 *//* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-around; *//* align-content: space-between; *//* 换行后的默认值 */align-content: stretch;}.one {width: 100px;height: 100px;background-color: red;margin: 2px;}.two {width: 100px;height: 100px;background-color: pink;margin: 2px;}.three {width: 100px;height: 100px;background-color: yellowgreen;margin: 2px;}</style>
</head><body><div class="box"><div class="one"></div><div class="two"></div><div class="three"></div><div class="three"></div><div class="three"></div></div>
</body></html>

相关文章：

【css3】06-css3新特性之网页布局篇

目录 伸缩布局或者弹性布局【响应式布局】 1 设置父元素为伸缩盒子 2 设置伸缩盒子主轴方向 3 设置元素在主轴的对齐方式 4 设置元素在侧轴的对齐方式 5 设置元素是否换行显示 6 设置元素换行后的对齐方式 7 效果测试原码 伸缩布局或者弹性布局【响应式布局】 1 设置父元…...

编程日记 2024/5/27 1:07:01

【开源】大学生竞赛管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、系统介绍 学生管理模块 教师管理模块 竞赛信息模块 竞赛报名模块 二、系统截图 三、核心代码 一、系统介绍 基于Vue.js和SpringBoot的大学生竞赛管理系统&#xff0c;分为管理后台和用户网页端&#xff0c;可以给管理员、学生和教师角色使用&#xff0c;包括学…...

编程日记 2024/5/27 1:05:59

跨境选品师不是神话：普通人也能轻松掌握，开启全球贸易新篇章！

随着互联网技术的飞速发展&#xff0c;跨境电商行业已成为全球经济的新增长点。在这个背景下&#xff0c;一个新兴的职业——跨境选品师&#xff0c;逐渐走进了人们的视野。那么&#xff0c;跨境选品师究竟是做什么的?普通人又该如何成为优秀的跨境选品师呢? 一、跨境选品师的…...

编程日记 2024/5/27 1:03:58

前缀和，差分算法理解

前缀和是什么&#xff1a; 前缀和指一个数组的某下标之前的所有数组元素的和&#xff08;包含其自身&#xff09;。前缀和分为一维前缀和&#xff0c;以及二维前缀和。前缀和是一种重要的预处理&#xff0c;能够降低算法的时间复杂度 说个人话就是比如有一个数组&#xff1a; …...

编程日记 2024/5/27 1:02:56

ubuntu/部分docker容器无法访问https站点

ubuntu/部分docker容器无法访问https站点 解决方案 解决方案 默认的系统内可能没有安装根证书&#xff0c;需要安装一下 apt install ca-certificates如果官方源比较慢&#xff0c;可以换为国内源&#xff0c;但是不要使用https...

编程日记 2024/5/27 1:00:54

【MySQL】库的基础操作

&#x1f30e;库的操作 文章目录&#xff1a; 库的操作 创建删除数据库 数据库编码集和校验集 数据库的增删查改       数据库查找       数据库修改 备份和恢复 查看数据库连接情况 总结 前言&#xff1a;   数据库操作是软件开发中不可或缺的一部分&#xff0…...

编程日记 2024/5/27 0:59:53

嵌入式0基础开始学习 ⅠC语言（2）运算符与表达式

1.运算符 什么是运算符&#xff1f; 用来进来某种运算的符号 如&#xff1a; - * / (取余&#xff0c;取模) a,几目运算符 根据其操作数的不同 单目运算符 该运算符…...

编程日记 2024/5/27 0:58:52

汇编语言（一）

寄存器&#xff1a;cpu中可以储存数据的器件&#xff08;AX&#xff0c;BX&#xff09; 汇编语言的组成&#xff1a;1.汇编指令 2.伪指令 3.其他符号 存储器&#xff1a;cpu&#xff0c;传入指令和数据&#xff0c;加以运算。&#xff08;内存&#xff09; 指令和数据&#…...

编程日记 2024/5/27 0:57:51

2010-2022年各省新质生产力数据（含原始数据+测算代码+计算结果）

2010-2022年各省新质生产力数据&#xff08;含原始数据测算代码计算结果&#xff09; 1、时间&#xff1a;2010-2022年 2、范围&#xff1a;31省 3、指标&#xff1a;gdp&#xff08;亿元&#xff09;、在岗职工工资&#xff1a;元、第三产业就业比重、人均受教育平均年限、…...

编程日记 2024/5/27 0:56:49

需求分析部分图形工具

描述复杂的事物时,图形远比文字叙述优越得多,它形象直观容易理解。前面已经介绍了用于建立功能模型的数据流图、用于建立数据模型的实体-联系图和用于建立行为模型的状态图,本节再简要地介绍在需求分析阶段可能用到的另外3种图形工具。 1 层次方框图 层次方框图用树形结…...

编程日记 2024/5/27 0:55:48

ML307R OpenCPU GPIO使用

一、GPIO使用流程图 二、函数介绍 三、GPIO 点亮LED 四、代码下载地址 一、GPIO使用流程图 这个图是官网找到的&#xff0c;ML307R GPIO引脚电平默认为1.8V&#xff0c;需注意和外部电路的电平匹配&#xff0c;具体可参考《ML307R_硬件设计手册_OpenCPU版本适用.pdf》中的描…...

编程日记 2024/5/27 0:54:47

python基于深度学习的聊天机器人设计

python基于深度学习的聊天机器人设计 开发语言:Python 数据库&#xff1a;MySQL所用到的知识&#xff1a;Django框架工具&#xff1a;pycharm、Navicat、Maven 系统功能实现 登录注册功能 用户在没有登录自己的用户名之前只能浏览本网站的首页&#xff0c;想要使用其他功能都…...

编程日记 2024/5/27 0:53:45

Golang设计模式（四）：观察者模式

观察者模式 什么是观察者 观察者模式(Observer Pattern)&#xff1a;定义对象之间的一种一对多依赖关系&#xff0c;使得每当一个对象状态发生改变时&#xff0c;其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅&#xff08;Publish/Subscribe&#xf…...

编程日记 2024/5/27 0:49:42

huggingface 笔记：查看GPU占用情况

0 准备部分 0.1 创建虚拟数据 import numpy as npfrom datasets import Datasetseq_len, dataset_size 512, 512 dummy_data {"input_ids": np.random.randint(100, 30000, (dataset_size, seq_len)),"labels": np.random.randint(0, 1, (dataset_size…...

编程日记 2024/5/27 0:48:41

JavaSE 学习记录

1. Java 内存 2. this VS super this和super是两个关键字&#xff0c;用于引用当前对象和其父类对象 this 关键字&#xff1a; this 关键字用于引用当前对象&#xff0c;即调用该关键字的方法所属的对象。 主要用途包括&#xff1a; 在类的实例方法中&#xff0c;通过 this …...

编程日记 2024/5/27 0:46:39

HTML与CSS的学习

什么是HTML,CSS&#xff1f; HTML(HyperText Markup Language):超文本标记语言。 超文本:超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等 标记语言:由标签构成的语言 >HTML标签都是预定义好的。例如:使用<a>…...

编程日记 2024/5/27 0:45:38

【单片机】STM32F070F6P6 开发指南（一）STM32建立HAL工程

文章目录 一、基础入门二、工程初步建立三、HSE 和 LSE 时钟源设置四、时钟系统&#xff08;时钟树&#xff09;配置五、GPIO 功能引脚配置六、配置 Debug 选项七、生成工程源码八、生成工程源码九、用户程序下载 一、基础入门 f0 pack下载&#xff1a; https://www.keil.arm…...

编程日记 2024/5/27 0:44:37

源码编译安装Rsync数据同步

源码编译安装 RPM软件包&#xff1a;rpm -ivh 或者 yum -y install 需要开发编译工具gcc、gcc-c、make等... 源码包----开发工具gcc与make----》可以执行的程序-----》运行安装 •主要优点 –获得软件的最新版&#xff0c;及时修复bug –软件功能可按需选择/定制&#xff…...

编程日记 2024/5/27 0:43:35

SQL Server2019安装步骤教程(图文)_最新教程

一、下载SQL Server2019 1.到微软官网下载SQL Server Developer版本&#xff0c;官网当前的2019版本下载需要注册账号。 不想注册的朋友&#xff0c;可以选择从网盘下载&#xff1a;点击此处直接下载 2.下载之后先解压&#xff0c;解压后执行exe安装程序。打开之后的界面如下…...

编程日记 2024/5/27 0:42:34

【SpringBoot】SpringBoot中防止接口重复提交（单机环境和分布式环境）

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f33c;前言 &#x1f512;单机环境下防止接口重复提交 &#x1f4d5;导入依赖 &#x1f4c2;项目结构 &#x1f680;创建自定义注解 ✈创建AOP切面 &#x1f697;创建Conotroller &#x1f4bb;分布…...

编程日记 2024/5/27 0:41:33

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/6 2:47:15

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/1/25 13:33:24

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/1 1:28:58

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2026/1/18 9:32:11