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

CSS布局——Flexbox基础使用

基础概念

Flexbox布局的概念

Flexbox布局是一种布局的模式,用来在一个维度上为项目设置布局

容器

在HTML中大多数元素例如divulmain块元素,spanemi行内元素都可以作为Flex容器,它的作用是开启一个Flex布局模式,你只需要在元素上面设置display: flex即可开启一个Flex布局容器。

项目

当开启一个Flex布局的时候,容器中的一个个元素::before::after、文本、dom元素就是项目,这些项目是容器的子元素,他们之间是父子关系,子元素也可以开启自己独立的Flex布局,他不会继承父元素的flex属性。

<div class="container"><div>1</div><div>1</div><div>1</div><div>1</div>
</div>
<!-- 开启Flex布局 -->
.container {display: flex; width: 300px;height: 200px;background-color: #8a8282;
}
主轴、侧轴

在Flex中容器有两个轴分别是主轴侧轴,默认情况下主轴沿着行的方向分布,侧轴沿着列的方向分布。有一点需要注意,主轴和侧轴的方向并不是固定不变的而是要受到flex-directionwriting-mode或者direction 阅读模式的影响

容器大小:主轴尺寸、侧轴尺寸

Flex容器的大小是由主轴尺寸或者侧轴尺寸决定的,主轴的尺寸:主轴开始位置到主轴结束位置的距离,侧抽尺寸:侧轴的开始位置到侧轴的结束位置的距离。

flex-direction控制项目的方向

flex-direction属性用来控制主轴上项目的排布方向,默认是row即按照行内的方式在一行排列,如果想让元素按照块的方式在一列显示则可以设置flex-direction: column``row-reversecolumn-reverse可以使主轴(或者侧轴)的起点和终点位置互换
image.png
image.png

flex-wrap控制项目换行

flex-wrap用来控制项目的换行,默认情况下是不换行的flex-wrap: nowrap,即使项目已经溢出容器了它也保持一行排列,如果想让容器中的项目在一行容纳不下后进行强制换行显示可以设置flex-wrap: wrap,wrap-reverse也会让项目换行只不过他的方向是相反的,例如wrap会让换行元素排列到下一行,而wrap-reverse会让换行元素排列到当前行的上一行去,如下👇

<style>
.container {width: 400px;background-color: #ddb6d8;display: flex;gap: 10px;border: 1px solid #0a57e7;flex-wrap: wrap-reverse;
}
.container div{width: 100px;height: 100px;background-color: #c9df0b;text-align: center;line-height: 100px;
}
</style>
<div class="container"><div>itm1</div><div>itm2</div><div>itm3</div><div>itm4</div>
</div>

image.png

order 项目排序

order属性是设置在容器中项目上面的,可以用来为项目进行排序,order的值越小当前元素越排在最前面,可以是正值也可以是负值。如果遇到两个order值相同的元素会按照实际文档上的顺序进行排列
image.png

gap项目之间的间距

gap用来设置项目之间的间距,只需要在flex容器上设置gap属性即可,接收两个值,如果只设置一个值的话,那么第二个值和第一个值等同,如果两个值都设置了,第一个值是row-gap行的间距,第二个则是column-gap列的间距
image.png

相关文章:

CSS布局——Flexbox基础使用

基础概念 Flexbox布局的概念 Flexbox布局是一种布局的模式&#xff0c;用来在一个维度上为项目设置布局 容器 在HTML中大多数元素例如div、ul、main块元素&#xff0c;span、em、i行内元素都可以作为Flex容器&#xff0c;它的作用是开启一个Flex布局模式&#xff0c;你只需…...

Kubernetes(K8s):容器化应用的航空母舰

一、Kubernetes简介 Kubernetes&#xff08;K8s&#xff09;是一个开源的容器编排系统&#xff0c;它的出现就像是为容器化应用提供了一艘强大的航空母舰。在这艘母舰上&#xff0c;你的应用容器就像是一架架战斗机&#xff0c;Kubernetes负责指挥它们起飞、飞行、降落&#x…...

Java配置49-nginx 反向代理 sftp 服务器

1. 背景 后端服务需要通过部署在跳板机上的 nginx 访问一个外网的 SFTP 服务器。 2. 方法 nginx从 1.9.0 开始&#xff0c;新增加了一个stream模块&#xff0c;用来实现四层协议的转发、代理或者负载均衡等。 首先检查 nginx 版本信息及是否安装了 stream 模块。 进入 ngi…...

Qt添加VTK并绘制图形

文章目录 准备环境使用VS创建Qt Widget项目配置VTK依赖调试C/C链接器 添加vtk窗口测试代码 参考链接&#xff1a; VS2017配置QT环境(详细版)_vs2017 qt-CSDN博客 QT5VTK9.1最新配置方法_qt vtk-CSDN博客 VTK笔记-Qt5.12.11编译VTK9.0.3-QVTKOpenGLNativeWidget-CSDN博客 准…...

VsCode搭建Spring Boot项目环境

VsCode搭建Spring Boot项目环境 1、前提条件&#xff1a;配置Java环境 下载安装JDK配置环境变量 2、VsCode配置SpringBoot环境 安装扩展 配置Maven 找到Maven配置文件&#xff0c;进行打开settings.json&#xff0c;添加如下代码&#xff1a; "workbench.iconThem…...

(黑马出品_05)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

&#xff08;黑马出品_05&#xff09;SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术分布式搜索 今日目标1.初识elasticsearch1.1.了解ES1.1.1.elasticsearch的作用1.1.2.ELK技术栈1.1.3.elasticsearch和lucene1.1.4.为什么不是其他搜索技…...

window mysql 安装出现的问题

1.安装到最后时&#xff0c;报错&#xff1a;authentication_string doesnt have a default value 解决办法&#xff1a; 1.不要关掉该页面&#xff0c;点击skip。 然后单击 back 回退到如下界面 2.去掉 Enable Strict Mode。 不要勾选 2. 最后一步&#xff1a;Start Servic…...

【3GPP】【核心网】【5G】5G核心网协议解析(二)(超详细)

5G UE 附着过程 UE AMF ----------------- 注册请求(Registration Request) ----------------------> <--------------- 鉴权请求(Authentication Request) ------…...

物联网带来的六大运营挑战

物联网现在被广泛认为是一种变革力量。根据Juniper Research的调查&#xff0c;到2020年底&#xff0c;将有385亿台设备连接到互联网&#xff0c;自2015年以来增长了285&#xff05;。 但是随着更多的设备互连&#xff0c;故障的数量也会增加。例如&#xff0c;根据Juniper的数…...

【ETCD】简介安装常用操作---图文并茂详细讲解

目录 一 简介 1.1 etcd是什么 1.2. 特点 1.3. 使用场景 1.4 关键字 1.5 工作原理 二 安装 2.1 etcd安装前介绍 2.2 安装 2.3 启动 2.4 创建一个etcd服务 三 常用操作 一 简介 1.1 etcd是什么 etcd是CoreOS团队于2013年6月发起的开源项目&#xff0c;它的目标是构建…...

第四篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas生物信息学领域应用

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas生物学数据操作应用介绍二、数据加载与清洗示例代码三、数据分析与统计示例代码四、数据可视化示例代码五、基因组数据分析示例代码六、蛋白质数据分析示例代码七、生物医学图像…...

Elasticsearch:机器学习与人工智能 - 理解差异

作者&#xff1a;来自 Elastic Aditya Tripathi, Jessica Taylor 长期以来&#xff0c;人工智能几乎完全是科幻小说作家的玩物&#xff0c;人类将技术推得太远&#xff0c;以至于它变得活跃起来 —— 正如好莱坞让我们相信的那样 —— 开始造成严重破坏。 令人愉快的东西&#…...

智引未来:2024年科技革新引领工业界变革与机遇

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

自动化运维工具----Ansible playbook详解

一.Ansible playbook简介 1.playbook是ansible用于配置&#xff0c;部署&#xff0c;和管理被节点的剧本 2.通过playbook的详细描述&#xff0c;执行其中的一些列tasks&#xff0c;可以让远端的主机达到预期的状态。playbook就像ansible控制器给被控节点列出的一系列to-do-lis…...

【element-ui】el-table表格高亮选中

highlight-current-row 是否要高亮当前行 <el-tableref"singleTable"highlight-current-rowcurrent-change"handleCurrentChange"></el-table>修改高亮行的颜色 .current-row {background-color: pink; }由current-change事件来管理选中时触发…...

构建MySQL数据库的高可用与高容错系统:关键策略与最佳实践

简介 在今天的数据驱动时代,数据库的高可用性(High Availability, HA)和高容错性(High Fault Tolerance)不再是可选项,而是每一个企业和应用都必须考虑的核心特性。特别是对于MySQL这样广泛使用的数据库系统,如何确保它能在各种故障面前保持持续可用,并且能迅速从故障…...

简析内部审计数字化转型的方法和路径【小落送书(第6期)】

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…...

mysql和oracle数据库的区别与联系(值得收藏)

1、mysql和oracle都是关系型数据库。 mysql默认端口&#xff1a;3306 默认用户root oracle默认端口 1521 默认用户system mysql的安装配置和卸载简单&#xff0c;oracle比较麻烦&#xff0c;严重的可能要你重做系统。 oracle在命令行用命令登陆&#xff1a;sqlplus---然后录…...

vulhub中Wordpress 4.6 任意命令执行漏洞复现

由于Mysql初始化需要一段时间&#xff0c;所以请等待。成功运行后&#xff0c;访问http://your-ip:8080/打开站点&#xff0c;初始化管理员用户名和密码后即可使用&#xff08;数据库等已经配置好&#xff0c;且不会自动更新&#xff09;。 发送如下数据包&#xff0c;可见/tmp…...

ETCD分布式缓存

一、ETCD简介 ETCD是一个高度可用的分布式键值存储系统&#xff0c;主要用于共享配置和服务发现。它基于Go语言实现&#xff0c;内部使用Raft一致性算法处理日志复制&#xff0c;保证多节点数据的强一致性。 ETCD的目标是构建一个高可用的分布式键值数据库&#xff0c;用于存…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

算法:模拟

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

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...