flex 弹性布局
Flex 布局的使用
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
//flex作为display的一个属性使用
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
基本概念
采用Flex布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
容器的属性
PS:我将每个属性效果单独展示,不混淆。强烈建议读者自己试一下。
现在我们将以下面代码为基础在上面展示:
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
css 样式
.box {width: 300px;height: 300px;background-color: aquamarine;display: flex;
}.box>div{border: 1px solid black;
}
开始效果

flex-direction
flex-direction属性:决定主轴的方向(即项目的排列方向)
- row(默认值):主轴为水平方向,起点在左端
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿
PS : 其实上面结合我的效果看挺好的,或者结合上面自动动手试一下,加深一下对文字理解。
1.默认不展示
2. flex-direction: row-reverse;
效果展示

3. flex-direction: column;
效果展示

4. flex-direction: column-reverse;
效果展示

justify-content
justify-content属性:项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等
- space-around:每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍
1.默认不展示
2.flex-end

3.center

4.space-between

5.space-around
项目之间间隔一样,项目与容器边框的间隔为项目之间间隔一半。
align-items
align-items属性:项目在交叉轴(横轴)上如何对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的交叉轴走向
- baseline: 项目的第一行文字的基线对齐
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
1.flex-start
ps:我这里不小心将项目高度改为50px
项目占满整个交叉轴走向的效果就消失了。

2.flex-end

3.center

4.baseline
感觉跟flex-start效果差别不大。

项目的属性
order
order属性:项目在主轴的排列顺序。数值越小,排列越靠前。
- 0(默认值)从小到大排列
- -1从大到小排列
假如第三个项目,给与order:1

flex-grow
flex-grow属性:项目在主轴上的放大比例
- 0(默认值),如果存在剩余空间,也不放大
- 如果所有项目的
flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink属性:项目在主轴上的缩小比例
- 1(默认值),如果所有项目值都为1,当空间不足时,都将等比例缩小
- 0,如果一个项目的属性为0,其他项目都为1,则空间不足时,前者不缩小
flex-basis
flex-basis属性:项目占据的主轴空间(main size)
- auto(默认值),即项目的本来大小
- css样式给的大小,项目将占据固定空间
flex(对比上面3个优先)
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self
align-self属性:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
- auto(默认值),表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
-
align-items的其他值-
参考资料:
Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
相关文章:
flex 弹性布局
Flex 布局的使用 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; //flex作为display的一个属性使用 } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意:设为 Flex 布局以后,子元素的float、clear和vertical-align…...
【C# 基础精讲】为什么选择C# ?
C#(C Sharp)是由微软开发的一种通用、面向对象的编程语言。它最初于2000年发布,自那时以来逐渐成为开发者的首选之一。C#的设计目标是提供一种简单、现代、可靠且安全的编程语言,使开发者能够轻松构建各种类型的应用程序。 为什么…...
HCIP BGP选路规则总结
选路前提条件 多条BGP路由目标相同,且均可优(下一跳可达、同步关闭),具有相同的优先级(管理距离)。 1、优选Preference_Value值最高的路由(私有属性,仅本地有效)。 不传递 权限最高属性 可…...
UE4 Cesium for unreal 离线加载应用全流程
参考配置:Win10、请保证是在局域网环境下配置 配置IP 右键选择:打开“网络和Internet” 设置 选择更改适配器选项 请保证以太网是处于启用状态并连接线缆,点击右键选择属性 双击选择Internet协议版本4(TCP/IPv4) 将IP地…...
翻转卡片游戏【力扣822】
解题思路 如果卡片上正面和背面的数字相同,都为x,那么x一定不符合要求,将这些数都记录到哈希表hash中。剩下的卡片正反面数字不相同,那么不在hash中的数字中的最小数min一定是答案。因为若min跟现在front数组中的某些数相同&…...
嵌入式开发学习(STC51-5-数码管)
内容 静态数码管:最左端显示0 动态数码管:从左到右,显示0-9 数码管简介 数码管是一种半导体发光器件,其基本单元是发光二极管; 类别: 数码管按段数可分为七段数码管和八段数码管,八段数码管…...
JavaScript |(四)正则表达式 | 尚硅谷JavaScript基础实战
学习来源:尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 📚正则表达式📚正则表达式字面量方式📚字符串&正则表达式🐇split()🐇search()🐇match()🐇replace()…...
docker-compose实现mysql主从复制
利用docker-compose实现mysql主从复制 1.首先创建挂载的目录以及配置信息 1.1 主 mkdir -p /opt/mysql/master/data mkdir -p /opt/mysql/master/config # 编写配置文件 vim /opt/mysql/master/config/my.cnfmy.cnf配置信息 [mysqld] usermysql default-storage-engineINNO…...
hbase基础
hbase安装 tar -zxvf hbase-2.4.11-bin.tar.gz -C . ln -s f hbase-2.4.11-bin hbasemv /export/server/hbase/lib/client-facing-thirdparty/slf4j-reload4j-1.7.33.jar /export/server/hbase/lib/client-facing-thirdparty/slf4j-reload4j-1.7.33.jar.bakvim conf/regionser…...
【GitOps系列】如何实施自动化渐进式交付?
文章目录 前言自动渐进式交付概述自动渐进式交付准备创建生产环境创建 AnalysisTemplate访问生产环境安装Prometheus配置 Ingress-Nginx 和 ServiceMonitor验证 Ingress-Nginx 指标 自动渐进式交付实战自动渐进式交付成功自动渐进式交付失败 结语 前言 在实施金丝雀发布的过程中…...
【网络】网络层(IP协议)
目录 一、基本概念 二、协议头格式 三、网段划分 四、特殊的IP地址 五、IP地址的数量限制 六、私有IP地址和公网IP地址 七、路由 一、基本概念 IP协议:提供一种能力, 将数据从A主机送到B主机,(TCP协议:确保IP协议…...
Unity数字可视化学校_昼夜(一)
maya2022:链接:https://pan.baidu.com/s/1cvB438UKsv_tU37NsOaNow 3dmax软件合集:百度网盘 请输入提取码 1180 1、 2、unity3d 导入插件 : (1)UniStorm - Volumetric Clouds Sky 5.3.0.unitypackage (天气&…...
QWidget样式
1、设置边框样式: QWidget {font-family:Microsoft YaHei UI;background:#ffffff;/*border:3px solid rgba(207, 209, 208, 170);设置整体边框*/border-bottom: 3px solid rgba(207, 209, 208, 170);/*设置底部边框*/border-top: 3px solid rgba(207, 209, 208, 1…...
TypeScript基础学习
目录 一、安装 1、下载国内镜像 2、安装 3、查看安装情况 4、使用例子 二、变量声明 1、规则 2、声明的四种方式 3、注意 4、类型断言 5、类型推断 6、变量作用域 三、基础类型(共11种) 1、Any 类型 2、Null 和 Undefined 3、never 类型…...
AOF日志:宕机了,Redis如何避免数据丢失
当服务器宕机后,数据全部丢失:我们很容易想到的一个解决方案是从后端数据库恢复这些数据,但这种方式存在两个问题:一是,需要频繁访问数据库,会给数据库带来巨大的压力;二是,这些数据…...
【编程】典型题目:寻找数组第K大数(四种方法对比)
【编程】典型题目:寻找数组第K大数(四种方法对比) 文章目录 【编程】典型题目:寻找数组第K大数(四种方法对比)1. 题目2. 题解2.1 方法一:全局排序(粗暴)2.2 方法二&#…...
Vue3 对比 Vue2 的变化
Vue3 对比 Vue2 的变化 1.源码组织方式变化:使用 TS 重写 2.支持 compositionAPI,基于函数的 api,更灵活组织组件逻辑(Vue2 使用 options api) 3.响应式系统提升:Vue3 的响应式数据原理改成了 Proxy,可以监听动态新增删…...
harbor搭建
回到目录 Harbor 是 VMware 公司开源的企业级 Docker Registry 项目,其目标是帮助用户迅速搭建一个企业级的 Docker Registry 服务 通俗的讲,harbor是一个私人镜像存储服务器 1 下载安装 进入官网,下载一个离线安装包,harbor官网下载 这…...
机器学习05-数据准备(利用 scikit-learn基于Pima Indian数据集作数据预处理)
机器学习的数据准备是指在将数据用于机器学习算法之前,对原始数据进行预处理、清洗和转换的过程。数据准备是机器学习中非常重要的一步,它直接影响了模型的性能和预测结果的准确性 以下是机器学习数据准备的一些常见步骤: 数据收集ÿ…...
【枚举+trie+dfs】CF514 C
Problem - 514C - Codeforces 题意: 思路: 其实是trie上dfs的板题 先把字符串插入到字典树中 对于每次询问,都去字典树上dfs 注意到字符集只有3,因此如果发现有不同的字符,去枚举新的字符 Code: #in…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
Python Einops库:深度学习中的张量操作革命
Einops(爱因斯坦操作库)就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库,用类似自然语言的表达式替代了晦涩的API调用,彻底改变了深度学习工程…...
