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

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

news 2025/8/16 22:34:14

目录

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

 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

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/8/3 2:39:27

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/8/5 15:38:16

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/8/5 22:41:43

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/8/4 23:26:41

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/7/21 22:01:13

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/7/30 17:45:48

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/7/14 0:13:22