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

弹性盒子布局

news 2026/2/9 2:09:04

目录

  • 一、弹性盒子属性
  • 二、认识flex的坐标轴
  • 三、简单学习父级盒子属性
  • 三、属性说明
    • 3.1、flex-grow

一、弹性盒子属性

说明：
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一、弹性盒子属性 说明&#xff1a; div的默认样式&#xff1a;display:block 块盒子 display:flex弹性盒子&#xff08;可以控制下级盒子的位置&#xff09; 当两种盒子单独出现…...

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

C# Sqlite数据库加密

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

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

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

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

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

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

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

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

[C++]string类模拟实现

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

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

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

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

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

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

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

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

我的 System Verilog 学习记录（5）

、 引言 本文简单介绍 System Verilog 语言的 控制流。 前文链接&#xff1a; 我的 System Verilog 学习记录&#xff08;1&#xff09; 我的 System Verilog 学习记录&#xff08;2&#xff09; 我的 System Verilog 学习记录&#xff08;3&#xff09; 我的 System Ver…...

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

多芯片设计 Designing For Multiple Die

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

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

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

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

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

数据结构-简介

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

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

python装饰器及其用法

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

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

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

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

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

JavaScript DOM【快速掌握知识点】

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

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

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

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

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

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

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

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

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

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

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

Javascript的API基本内容（二）

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

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

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

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

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

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

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49