flex布局容易忽略的角色作用
目录
清除浮动
作用于行内元素
flex-basis宽度
案例一:
案例二:
案例三:
flex-grow设置权重
案例一:
案例二:
简写flex-grow:1 0 auto;
flex作为一维布局,行和列的使用,忽略的小角色,大作用。
清除浮动
父元素display:flex; 子元素的float:left;无效。
<div class="wrap"><div class="item">首页0</div><div class="item"><span>内容很长</span><span>helloWorld</span></div><div class="item">首页2</div></div>
.wrap {width:562px;background-color: #999;display: flex;
}
.item{float: left;background-color:aquamarine;color:blueviolet;border: 1px solid #999;margin: 20px;
}

作用于行内元素
第二个item下面有两个行内元素span,在父元素item中更改期布局。
.item:nth-child(2){
display: inline-flex;
flex-direction: column;
text-align:center;
}
.wrap {width:562px;background-color: #999;display: flex;
}
.item{float: left;background-color:aquamarine;color:blueviolet;border: 1px solid #999;margin: 20px;
}
.item:nth-child(2){display: inline-flex;flex-direction: column;
}

flex-basis宽度
在使用flex布局之中,flex-basis不是auto的情况下,等同于width;
flex-grow的值用来定义每个子元素的比例权重值。
案例一:
flex-basis和width同时存在的话,flex-basis有number值,优先级高于width
<div class="wrap"><div class="item flex1">flex1 text Hello world</div><div class="item flex2">flex2 text Hello world</div><div class="item flex3">flex3 text Hello world</div><div class="item flex4">flex4 text Hello world</div><div class="item flex5">flex5 text Hello world</div><div class="item flex6">flex6 text Hello world</div>
</div>
<style>
.wrap {width:100%;height: 200px;display: flex;
}
.item {flex-basis: 100px;// 这时的width的值无效,flex-basis优先级高于width的值width: 10;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}
</style>

案例二:
flex-basis值为auto时,大小跟随width的值
.item {flex-basis: auto;// 这时flex-basis的值为auto,值跟随width的值width:80px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}

案例三:
内容有空格不会换行展示,flex-basis配合white-space:nowrap;使用。
flex-basis:0;
white-space:nowrap;
.item {flex-basis: 0;white-space: nowrap;width: 90px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}
- 默认是auto,跟随内容的大小来适应,如果这时设置了width,则等于width的值;
- 不为auto,例如'100px',这时的width值无效,在使用flex布局情况下,flex-basis优先级高于width;
- 为0时,子元素的宽度跟随width的值;如果内容有空格,会换行展示;
- flex-basis:0;white-space:nowrap; 宽度跟随width的值,内容如果有空格,使用white-space:nowrap; 不会换行;
flex-grow设置权重
1:剩余空间:父元素的总宽度减去子元素宽度之和
2:权重比例值:所有子元素flex-grow之和 > 1 ? 1 : 所有子元素flex-grow之和
3:可以分配的剩余空间 = 剩余空间*权重比例值
4:可以分配的剩余空间 * 单个子元素权重之和/所有子元素权重之和
案例一:
在父元素宽度没有撑满的情况下,使用flex-grow比重属性,用来占满父元素多余的空间。
.item {flex-basis: 14%;flex-grow:0.2;width:10px;border: 1px solid #999;background-color:aqua;font-size: 16px;font-family: bold;
}
.flex2 {flex-grow: 3;background-color:blue;
}

案例二:
之前写布局的时候,经常使用的布局方式如下,然后在子元素设置width:100%;
.wrap {width:562px;background-color: #999;display: flex;justify-content: space-around;
}
.item{width:100%;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}
子元素使用flex-grow:1;flex-grow:1;也可以达到同样的效果
.wrap {width:562px;background-color: #999;display: flex;
}
.item{flex-grow:1;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}
![]()
简写flex-grow:1 0 auto;
flex-grow:1;
flex-shrink: 0;
flex-basis: auto;
.wrap {width:562px;background-color: #999;display: flex;
}
.item{flex: 1 0 auto;text-align:center;background-color:aquamarine;color:blueviolet;border: 1px solid #999;
}
相关文章:
flex布局容易忽略的角色作用
目录 清除浮动 作用于行内元素 flex-basis宽度 案例一: 案例二: 案例三: flex-grow设置权重 案例一: 案例二: 简写flex-grow:1 0 auto; flex作为一维布局,行和列的使用,忽略的小角色,大…...
如何开发高效的企业内训APP?教育培训系统源码搭建实战详解
本篇文章,小编将从教育培训系统的源码搭建、功能设计以及技术实现等方面,详细探讨如何开发一款高效的企业内训APP。 一、企业内训APP的需求分析 在开发企业内训APP之前,首先需要明确其基本需求。一个高效的企业内训APP应该具备以下几个核心…...
【软考网工笔记】网络基础理论——传输层
IPSec协议 Internet协议安全性是一种开放标准的框架结构,通过使用加密的安全服务以确保在Internet协议(IP)网络上进行保密而安全的通讯。 工作在OSI模型的第三层网络层上,使其在单独使用时适于保护基于TCP或UDP的协议࿰…...
如何预防服务器后台爆破攻击
服务器后台爆破(Brute Force Attack)是一种通过反复尝试用户名和密码组合,以非法获取系统访问权限的攻击方式。这种攻击不仅会消耗服务器资源,还可能导致合法用户被锁定或敏感数据泄露。为了有效预防服务器后台爆破攻击࿰…...
CMake笔记之在CMakeLists.txt文件中开启Debug模式
CMake笔记之在CMakeLists.txt文件中开启Debug模式 code review! 文章目录 CMake笔记之在CMakeLists.txt文件中开启Debug模式1.设置 CMake 的构建类型2.添加编译器的调试选项3.使用 CMAKE_CXX_STANDARD (可选)4.编译和构建5.针对多配置生成器6.最终示例 CMakeLists.txt 1.设置 …...
C++编程:模拟实现CyberRT的DataVisitor和DataDispatcher
文章目录 0. 引言1. 设计概要1.1 主要组件1.2 类关系图1.3 工作流程 2. 代码实现2.1. 定义数据结构2.2. 实现 DataVisitor2.3. 实现 DataDispatcher2.4. 实现 Receiver2.5. 实现具体的 DataVisitor2.6. 示例主程序2.7. 编译和运行 0. 引言 使用 C 实现一个类似CyberRT 架构的 …...
【Flutter】WillPopScope组件-监听物理返回键事件自定义返回事件
WillPopScope(onWillPop: () async {if ( flutterWebViewPlugin ! null && await flutterWebViewPlugin.canGoBack() true) {flutterWebViewPlugin!.goBack();return false; // 阻止默认的返回行为} else {return true; // 允许默认的返回行为}},child: Scaffold(),);…...
【sqlserver】mssql 批量加载数据文件 bulk copy使用
参考文章: Using bulk copy with the JDBC driver SqlServer数据批量写入 SqlServer批量插入数据方法–SqlBulkCopy sqlserver buld copy需要提供,数据文件的对应表的元数据信息主要的字段的位置、字段的名称、字段的数据类型。 执行bulk load时候不一…...
flinkSql中累计窗口CUMULATE
eventTime package com.bigdata.day08;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.bridge.java.StreamTableEnvironment;public class _05_flinkSql_Cumulate_eventTime {/*** 累积窗口 eventTime* …...
关于在ubuntu上无法运行EasyConnect的解决方法
需要这三个文件 libpangocairo-1.0-0_1.40.14-1_amd64.deb libpangoft2-1.0-0_1.40.14-1_amd64.deb libpango-1.0-0_1.40.14-1_amd64.deb然后执行 cp source /usr/share/sangfor/EasyConnect再重启EasyConnect即可 下载链接 http://kr.archive.ubuntu.com/ubuntu/pool/main/…...
【Axure高保真原型】数值条件分组
今天和大家分享数值条件分组的原型模板,效果包括: 点击添加分组按钮,可以显示添加弹窗,填写分组名称和数值区间后,可以新增该分组信息‘’ 修改分组区间,可以直接在输入框里修改已有的分组区间,…...
python学习——字符串的拼接操作
在Python中,字符串拼接是一项基本操作,用于将多个字符串合并成一个字符串。以下是几种常见的字符串拼接方式: 1. 使用 运算符 最简单和直接的方式是使用 运算符来拼接字符串。 str1 "Hello, " str2 "World!" resu…...
多线程篇-8--线程安全(死锁,常用保障安全的方法,安全容器,原子类,Fork/Join框架等)
1、线程安全和不安全定义 (1)、线程安全 线程安全是指一个类或方法在被多个线程访问的情况下可以正确得到结果,不会出现数据不一致或其他错误行为。 线程安全的条件 1、原子性(Atomicity) 多个操作要么全部完成&a…...
el-select的搜索功能
el-select的相关信息: 最基本信息 v-model的值为当前被选中的el-option的 value 属性值 :label是选择器可以看到的内容 过滤搜索 普通过滤搜索 <el-selectv-model"selectedCountry"placeholder"请选择国家"filterable:loading"lo…...
MFC实现全屏功能
之前全屏都是参考: MFC单文档(SDI)全屏程序的实现 主要思路就是将各种菜单工具栏隐藏恢复。 随着MFC的升级,MFC框架本身就具备了全屏的功能。 微软有一个全屏实现类: CFullScreenImpl Class managing full-screen mod…...
网络安全技术详解:虚拟专用网络(VPN) 安全信息与事件管理(SIEM)
虚拟专用网络(VPN)详细介绍 虚拟专用网络(VPN)通过在公共网络上创建加密连接来保护数据传输的安全性和隐私性。 工作原理 VPN的工作原理涉及建立安全隧道和数据加密: 隧道协议:使用协议如PPTP、L2TP/IP…...
v-model 根据后端接口返回的数据动态地确定要绑定的变量
在 Vue 中,v-model 是用于创建双向绑定的指令。通常,它用于与组件或表单元素的值进行绑定。但有时你可能需要根据后端接口返回的数据动态地确定要绑定的变量。 你可以通过以下步骤来实现这个需求: 步骤 1: 获取后端接口数据 首先ÿ…...
图形开发基础之在WinForms中使用OpenTK.GLControl进行图形绘制
前言 GLControl 是 OpenTK 库中一个重要的控件,专门用于在 Windows Forms 应用程序中集成 OpenGL 图形渲染。通过 GLControl,可以轻松地将 OpenGL 的高性能图形绘制功能嵌入到传统的桌面应用程序中。 1. GLControl 的核心功能 OpenGL 渲染上下文&…...
离散数学重点复习
第一章.集合论 概念 1.集合是不能精确定义的基本数学概念.通常是由指定范围内的满足给定条件的所有对象聚集在一起构成的 2.制定范围内的每一个对象称为这个集合的元素 3.固定符号如下: N:自然数集合 Z:整数集合 Q:有理数集合 R:实数集合 C:复数集合 4.集合中的元素是…...
Javaweb梳理21——Servlet
Javaweb梳理21——Servlet 21 Servlet21.1 简介21.3 执行流程21.4 生命周期4.5 方法介绍21.6 体系结构21.7 urlPattern配置21.8 XML配置 21 Servlet 21.1 简介 Servlet是JavaWeb最为核心的内容,它是Java提供的一门动态web资源开发技术。使用Servlet就可以实现&…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
