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

弹性盒子布局

news 2025/12/14 15:11:19

一、弹性盒子属性

说明：
div的默认样式：display:block 块盒子
display:flex弹性盒子（可以控制下级盒子的位置）

当两种盒子单独出现时，效果时一样的
但是在里面加入块盒子时就不一样了
在这里插入图片描述

二、认识flex的坐标轴

当flex出现时，就会产生一个坐标轴
在这里插入图片描述

三、简单学习父级盒子属性

父级盒子默认属性（控制下级盒子属性）：（父级盒子为粉色）

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: row;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*
justify-content: center;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: center;

在这里插入图片描述

三、属性说明

3.1、flex-grow

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0 0;}.father{width: 100%;height: 100vh;display: flex;}.child{/* 每一个子元素使用父元素剩余的空间（有一定隐患） */flex-grow: 1;}</style>
</head>
<body><div class="father"><div class="child" style="background: red;"></div><div class="child" style="background: blue;"></div><div class="child" style="background: yellow;"></div></div>
</body>
</html>

存在的隐患：
若某一个元素内有值，那么均分就是从剩余空间分，这时有内容的元素内将分得更多空间

<div class="father"><div class="child" style="background: red;">0000000000000000000000000000000000000000000000000000000000000</div><div class="child" style="background: blue;"></div><div class="child" style="background: yellow;"></div>
</div>

在这里插入图片描述

解决方案：

<style>body{margin: 0 0;}.father{width: 100%;height: 100vh;display: flex;}.child{/* 每一个子元素使用父元素剩余的空间（有一定隐患） */flex-grow: 1;/* 增长的起跑线同意设置为0，默认值为auto */flex-basis: 0;}
</style>

在这里插入图片描述
综合简写后：

<style>body{margin: 0 0;}.father{width: 100%;height: 100vh;display: flex;}.child{/* 每一个子元素使用父元素剩余的空间（有一定隐患） *//* flex-grow: 1; *//* 增长的起跑线同意设置为0，默认值为auto *//* flex-basis: 0; *//* 复合属性，增长为1，压缩为0 */flex: 1 0;}
</style>

弹性盒子布局

目录一、弹性盒子属性二、认识flex的坐标轴三、简单学习父级盒子属性三、属性说明3.1、flex-grow一、弹性盒子属性说明： div的默认样式：display:block 块盒子 display:flex弹性盒子（可以控制下级盒子的位置） 当两种盒子单独出现…...

编程日记 2023/2/27 21:11:53

C# Sqlite数据库加密

sqlite官方的数据库加密是收费的，而且比较贵。幸亏微软提供了一种免费的方法。 1 sqlite加密demo 这里我做了一个小的demo演示如下： 在界面中拖入数据库名、密码、以及保存的路径比如我选择保存路径桌面的sqlite目录，数据库名guigutool…...

编程日记 2023/2/27 21:10:44

高压放大器在声波谐振电小天线收发测试系统中的应用

实验名称：高压放大器在声波谐振电小天线收发测试系统中的应用研究方向：信号传输测试目的：声波谐振电小天线颠覆了传统电小天线以电磁波谐振作为理论基础的天线发射和接收模式，它借助声波谐振实现电磁信号的辐射或接收。因为同频的…...

编程日记 2023/2/27 21:09:35

锁相环的组成和原理及应用

一.锁相环的基本组成许多电子设备要正常工作，通常需要外部的输入信号与内部的振荡信号同步，利用锁相环路就可以实现这个目的。锁相环路是一种反馈控制电路，简称锁相环(PLL)。锁相环的特点是：利用外部输入的参考信号控制环路内…...

编程日记 2023/2/27 21:08:25

[C++]string类模拟实现

目录前言： 1. string框架构造 2. 默认函数 2.1 构造函数 2.2 析构函数 2.3 拷贝构造 2.4 赋值重载 3. 迭代器 4. 整体程序前言： 本篇文章模拟实现了C中string的部分功能，有助于大家了解和熟悉string类，虽然这个类不难实…...

编程日记 2023/2/27 21:07:17

一个更适合Java初学者的轻量级开发工具：BlueJ

Java是世界上最流行的编程语言之一，它被广泛用于从Web开发到移动应用的各种应用程序。大部分Java工程师主要是用IDEA、Eclipse为主，这两个开发工具由于有强大的能力，所以复杂度上就更高一些。如果您刚刚开始使用Java，或者您更适合…...

编程日记 2023/2/27 21:06:06

从程序员到项目组长，要经历六重修炼

最近和粉丝朋友们交流时发现，有很多刚刚开始做项目组长的朋友自我认可度非常低，感觉做组长之后天天打杂，技术也荒废了。领导天天找你要成果，下属天天找你说困难，你在中间受领导和下属的夹板气。时间久了，你…...

编程日记 2023/2/27 21:04:57

我的 System Verilog 学习记录（5）

、引言本文简单介绍 System Verilog 语言的控制流。前文链接： 我的 System Verilog 学习记录（1） 我的 System Verilog 学习记录（2） 我的 System Verilog 学习记录（3） 我的 System Ver…...

编程日记 2023/2/27 21:03:48

多芯片设计 Designing For Multiple Die

Why a system-level approach is essential, and why its so challenging作者：Ann MutschlerAnn Mutschler is executive editor at Semiconductor Engineering.将多个裸片或芯粒集成到一个封装中，与将它们放在同一硅片上有着很大的区别。在同一硅片上&a…...

编程日记 2023/2/27 21:02:40

2022年全国职业院校技能大赛（中职组）网络安全竞赛试题A（10）

目录竞赛内容模块A 基础设施设置与安全加固一、项目和任务描述： 二、服务器环境说明三、具体任务（每个任务得分以电子答题卡为准） A-1任务一登录安全加固（Windows, Linux） 1.密码策略（Windows, …...

编程日记 2023/2/27 21:01:31

数据结构-简介

目录 1、简介 2、作用 3、分类 4、实现分类 1、简介数据结构指的是组织和存储数据的方法。它涉及到一系列的算法和原则，用来设计和实现不同种类的数据类型，如数组、链表、树、图等等。数据结构的目的是在计算机程序中有效地管理和操作数据&#xff…...

编程日记 2023/2/27 21:00:23

python装饰器及其用法

python装饰器是什么? Python装饰器是一种语法结构，它可以让开发者在不修改原函数的基础上，在函数的前后运行额外的代码，这些代码可以达到修改函数行为的目的。Python装饰器的实质是一个可调用的对象，它可以接收函数作为参数…...

编程日记 2023/2/27 20:59:13

Appium自动化测试之启动时跳过初始化设置

Appium每次启动时都会检查和安装Appium Settings，这是完全没有必要的，在首次使用Appium连接设备是Appium Settings便已经安装好。怎样跳过安装Appium Settings呢？之前的做法是修改appium中的源文件中的android-helpers.js实现，如M…...

编程日记 2023/2/27 20:56:54

JavaScript DOM【快速掌握知识点】

目录 DOM简介获取元素修改元素添加和移除元素事件处理 DOM简介 JavaScript DOM 是指 JavaScript 中的文档对象模型（Document Object Model）；它允许 JavaScript 与 HTML 页面交互，使开发者可以通过编程方式动态地修改网页…...

编程日记 2023/2/27 20:55:45

不需要高深技术，只需要Python：创建一个可定制的HTTP服务器！

目录 1、编写服务端代码,命名为httpserver.py文件。 2、编写网页htmlcss文件，命名为index.html和style.css文件。 3、复制htmlcss到服务端py文件同一文件夹下。 4、运行服务端程序。 5、浏览器中输入localhost:8080显示如下： 要编写一个简单的能发布…...

编程日记 2023/2/27 20:54:34

渗透测试常用浏览器插件汇总

1、shodan这个插件可以自动探测当前网站所属的国家、城市，解析IP地址以及开放的服务和端口，包括但不限于FTP、DNS、SSH或者其他服务等，属被动信息搜集中的一种。2、hackbar（收费之后用Max Hackerbar代替）这个插件可用于…...

编程日记 2023/2/27 20:53:26

社区1月月报｜OceanBase 4.1 即将发版，哪些功能将会更新？

我们每个月都会和大家展开一次社区进展的汇报沟通会，希望通过更多的互动交流让OceanBase 开源社区更加透明，实现信息共享，也希望能营造更加轻松的氛围，为大家答疑解惑，让大家畅所欲言。如果您对我们的社区有任何建议&a…...

编程日记 2023/2/27 20:52:17

Javascript的API基本内容（二）

一、事件监听结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。 addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和…...

编程日记 2023/2/27 20:51:08

ChatGPT热度“狂飙”，OceanBase也去找它唠了唠

最近互联网的关键字非 ChatGPT 莫属就是这个小东西集唠嗑、提问、答疑、科普、写作于一体让我看看哪个孤独的打工人还没和 ChatGPT 聊上一聊有人说 ChatGPT 这么智能或将取代人类的工作 OceanBase 的小编表示不服气于是，抱着好奇之心试了一试对 …...

编程日记 2023/2/27 20:50:00

HTTP协议基础知识点扫盲；HTTPS协议及密码学基础

目录一、Http协议的特性二、http协议的请求 1.请求行第一行，包含三个信息：请求方式，url，http协议版本 2.请求头浏览器向服务器发送一些状态数据，标识数据等等 3.请求主体请求代理端项服务器端，发送的…...

编程日记 2023/2/27 20:48:50

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/12/9 0:39:16

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。一、为何需要创建独立账号？ 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2025/12/9 1:23:41

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展扩展入口文件文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

AI语音助手的Python实现

引言语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/12/13 11:41:02

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成，具体方法取决于设备类型（如USB麦克风、3.5mm接口麦克风或HDMI音频输入）。以下是详细指南： 1. 连接音频输入设备 USB麦克风/声卡：直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/11/22 14:54:34

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示逐帧…...

编程新知 2025/12/3 20:41:18

目录

一、弹性盒子属性

二、认识flex的坐标轴

三、简单学习父级盒子属性

三、属性说明

3.1、flex-grow

相关文章：