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

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

news 2025/10/11 22:00:22

目录

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

 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

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/10/8 8:12:17

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/9/24 3:06:44

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/9/22 19:47:07

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/10/11 19:14:27

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/9/28 3:58:08

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/7/6 16:42:10

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2025/10/7 23:02:53

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试，但是对于熟悉Java语言的开发或是测试人员，可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录，里面…...

编程新知 2025/9/23 10:53:18