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

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

news 2026/2/10 0:09:52

目录

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

 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

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/11/13 14:22:52