【2024】前端学习笔记11-网页布局-弹性布局flex

学习笔记

  • 网页布局
  • 弹性布局:flex
  • 案例:flex布局案例

网页布局

在页面布局中,display属性用于设置一个元素的显示方式。它可以指定元素是作为块级元素、内联元素还是充当表格元素显示。

display的常见属性值:

  • block:将元素显示为块级元素,块级元素会独占一行,并强制换行。可设置宽度、高度、内边距和外边距。
  • none:隐藏元素,使其在页面上不可见。
  • inline:将元素显示为行内元素,行内元素不会独占一行,可以在同一行内与其他元素一起显示。不能设置宽度和高度,尺寸由内容决定。
  • inline-block:将元素显示为行内块元素。结合了块级元素和行内元素的特点,既可以设置宽度和高度,又可以在同一行内显示。
  • flex:将元素设置为弹性布局容器,允许以灵活的方式控制子元素的布局和尺寸。
  • grid:将元素设置为网格布局容器,允许将元素组织成行和列的网格中。

弹性布局:flex

写法:

display: flex

flex常用属性:

  • flex-direction:定义排列方向
    • row:默认,从左到右水平排列
    • row-reverse:从右到左水平排列
    • column:从上到下垂直排列
    • column-reverse:从下到上垂直排列
  • flex-wrap:定义换行方式
    • nowrap:默认,不换行,即使已经超出指定范围
    • wrap:换行,从上到下依次排列
    • wrap-reverse:换行,从下到上,从左到右顺序排列
  • justify-content:子元素对齐方向
    • flex-start:默认,在主轴的起始位置对齐
    • flex-end:在主轴的结束位置对齐
    • center:在主轴方向上居中对齐
    • space-between:在主轴方向上均匀分布,第一个弹性项在主轴起始位置,最后一个弹性项在主轴结束位置
    • space-around:在主轴方向上均匀分布,并且每个弹性项两侧的间距相等
    • space-evenly:在主轴方向上均匀分布,并且每个弹性项之间的间距以及边缘到第一个和最后一个弹性项的间距都相等

案例:flex布局案例

HTML结构代码:

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex 布局案例</title><link rel="stylesheet" href="css/test.css">
</head><body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>

CSS结构代码:

.container {display: flex;/* 设置 flex 容器 */flex-direction: row;/* 主轴方向为水平方向从左到右 */flex-wrap: nowrap;/* 不换行 */justify-content: space-between;/* 项目在主轴上均匀分布,两端留有空白 */background-color: rgb(232, 51, 51);width: 800px;padding: 10px;
}.item {background-color: skyblue;padding: 20px;color: rgb(59, 124, 170);font-size: 18px;
}

展示效果:

在这里插入图片描述
CSS内容解释:

container类是将容器设置为弹性容器(display: flex);
并设置主轴方向为水平从左到右(flex-direction: row);
控制弹性容器内的子元素为不换行(flex-wrap: nowrap);
子元素在主轴上的对齐方式为均匀分布,两端留有空白(justify-content: space-between)。

更多display详细使用请参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决方案:机器学习中,出现欠拟合和过拟合,这两种情况分别如何解决

文章目录 一、现象二、解决方案欠拟合&#xff08;Underfitting&#xff09;过拟合&#xff08;Overfitting&#xff09; 一、现象 在工作中&#xff0c;在机器学习中&#xff0c;出现欠拟合和过拟合的时候&#xff0c;需要有对应的解决方法&#xff0c;所以整理一下 二、解决…

k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载

目录 1 MetailLB 搭建 1.1 MetalLB 的作用和原理 1.2 MetalLB功能 1.3 部署 MetalLB 1.3.1 创建deployment控制器和创建一个服务 1.3.2 下载MealLB清单文件 1.3.3 使用 docker 对镜像进行拉取 1.3.4 将镜像上传至私人仓库 1.3.5 将官方仓库地址修改为本地私人地址 1.3.6 运行清…

驱动中的device和device_driver结构体

device和device driver是Linux驱动开发的基本概念。Linux kernel的思路很简单&#xff1a;驱动开发&#xff0c;就是要开发指定的软件&#xff08;driver&#xff09;以驱动指定的设备&#xff0c;所以kernel就为设备和驱动它的driver定义了两个数据结构&#xff0c;分别是devi…

ensp回顾--聚合链路技术简介与详细案例(构建基于交换机到交换机的聚合链路)

文章目录 什么是聚合链路&#xff1f;聚合链路的工作原理聚合链路的优势使用场景 案例ensp版本图例pc的ip地址具体步骤连通性测试 在现代网络中&#xff0c;聚合链路&#xff08;Link Aggregation&#xff09;是一种常见的技术&#xff0c;用于提高网络连接的带宽和可靠性。本文…

RNN经典案例——构建人名分类器

RNN经典案例——人名分类器 一、数据处理1.1 去掉语言中的重音标记1.2 读取数据1.3 构建人名类别与人名对应关系字典1.4 将人名转换为对应的onehot张量 二、构建RNN模型2.1 构建传统RNN模型2.2 构建LSTM模型2.3 构建GRU模型 三、构建训练函数并进行训练3.1 从输出结果中获得指定…

【可答疑】基于51单片机的智能台灯(含仿真、代码、报告、演示视频等)

✨哈喽大家好&#xff0c;这里是每天一杯冰美式oh&#xff0c;985电子本硕&#xff0c;大厂嵌入式在职0.3年&#xff0c;业余时间做做单片机小项目&#xff0c;有需要也可以提供就业指导&#xff08;免费&#xff09;~ &#x1f431;‍&#x1f409;这是51单片机毕业设计100篇…

2025秋招LLM大模型多模态面试题(九)-- LoRA 面试问题大全:从理论到实践

随着深度学习模型的不断发展,微调大模型的需求也逐渐增多。然而,传统的全参数微调需要消耗大量的计算资源和显存,对于普通用户和中小企业来说负担较大。为了应对这些问题,LoRA(Low-Rank Adaptation)应运而生。LoRA 是一种高效微调技术,通过低秩分解的方式显著减少训练参…

单目三d重建学习笔记2024

从单目视频生成动态多物体场景 已经开源&#xff1a; https://github.com/dreamscene4d/dreamscene4d 2021年&#xff1a; 浙大团队研发NeuralRecon&#xff0c;首个基于学习的实时单目三维重建系统 https://github.com/zju3dv/NeuralRecon https://github.com/zju3dv/Neura…

数据分析-28-交互式数据分析EDA工具和低代码数据科学工具

文章目录 1 数据分析的七步指南1.1 第一步:问题定义和数据采集1.2 第二步:数据清洗和预处理1.3 第三步:数据探索和分析1.4 第四步:模型建立和分析1.5 第五步:数据可视化1.6 第六步:结果解释和报告1.7 第七步:部署和维护1.8 基础的数据分析库1.9 低代码数据科学工具2 EDA…

Flutter InAppWebView 路由导航处理

flutter InAppWebView路由导航处理&#xff0c;有以下两种处理方案&#xff1a; H5层控制路由&#xff0c;H5拥有自己的路由&#xff0c;当返回到跟路由root时&#xff0c;此时点击跟节点&#xff0c;通过jsbridge调用flutter提供的方法来关闭当前widget&#xff0c;flutter关…

改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法

在前端开发中&#xff0c;当数组数据发生变化时&#xff0c;是否会导致页面重新渲染&#xff0c;以及如何进行相关操作&#xff0c;这取决于使用的具体框架或库&#xff08;如React、Vue等&#xff09;及其内部机制。以下是对这一问题的详细解答&#xff1a; 一、会导致页面重…

STM32 通用定时器

一、概述 STM32内部集成了多个定时/计数器&#xff0c;根据型号不同&#xff0c;STM32系列芯片最多包含8个定时/计数器。其中&#xff0c;TIM6、TIM7为基本定时器&#xff0c;TIM2~TIM5为通用定时器&#xff0c;TIM1、TIM8为高级控制定时器。 1.定时器的类型 基本定时器通用定…

实战案例:结合大模型与爬虫技术实现12306智能查票系统

大语言模型&#xff0c;例如 GPT-4&#xff0c;拥有强大的知识储备和语言理解能力&#xff0c;能够进行流畅的对话、创作精彩的故事&#xff0c;甚至编写代码。然而&#xff0c;它们也面临着一些难以克服的困境&#xff0c;就像一个空有知识却无法行动的巨人 信息滞后&#xf…

Linux 之 安装软件、GCC编译器、Linux 操作系统基础

安装软件、GCC编译器、Linux 操作系统基础 学习任务&#xff1a; 安装 Vmware虚拟机、掌握Ubuntu 系统的使用认识 Ubuntu 操作系统的终端和 Shell掌握软件安装、文件系统、掌握磁盘管理与解压缩掌握 VIM 编辑器、Makefile 基本语法熟悉 Linux 常见指令操作 安装好开发软件&…

148.排序链表

文章目录 方法1&#xff1a;自顶向下的归并排序方法2 自底向上的归并排序 方法1&#xff1a;自顶向下的归并排序 使用归并排序算法。归并排序是一种分治算法&#xff0c;它将链表分成两半&#xff0c;然后对每一半进行排序&#xff0c;最后将两个有序的链表合并。由于链表不支…

[Go语言快速上手]初识Go语言

目录 一、什么是Go语言 二、第一段Go程序 1、Go语言结构 注意 2、Go基础语法 关键字 运算符优先级 三、Go语言数据类型 示例 小结 一、什么是Go语言 Go语言&#xff0c;通常被称为Golang&#xff0c;是一种静态类型、编译型的计算机编程语言。它由Google的Robert Gr…

用HTML5+CSS+JavaScript庆祝国庆

用HTML5CSSJavaScript庆祝国庆 中华人民共和国的国庆日是每年的10月1日。 1949年10月1日&#xff0c;中华人民共和国中央人民政府成立&#xff0c;在首都北京天安门广场举行了开国大典&#xff0c;中央人民政府主席毛泽东庄严宣告中华人民共和国成立&#xff0c;并亲手升起了…

Vue3 中Ref的最佳实践

在vue3中如果我们需要获取一个响应式的变量&#xff0c;可以使用ref来定义一个变量。 const name ref( "" );name.value "test" 定义好后&#xff0c;就可以实现修改状态&#xff0c;更新UI的效果了。 在这个基础上&#xff0c;本文主要讨论跨组件时如何…

Discord:报错:A fatal Javascript error occured(解决办法)

按 Windows 键 R 并输入 %appdata% 选择 discord 文件夹并将其删除。 再次按 Windows 键 R 并输入 %LocalAppData% 选择 discord 文件夹并再次将其删除。 附加&#xff1a; 如果还不行&#xff0c;就通过官网下载吧&#xff0c;这个问题通过epic下载可能会有

Python并发编程挑战与解决方案

Python并发编程挑战与解决方案 并发编程是现代软件开发中的一项核心能力&#xff0c;它允许多个任务同时运行&#xff0c;提高程序的性能和响应速度。Python因其易用性和灵活性而广受欢迎&#xff0c;但其全局解释器锁&#xff08;GIL&#xff09;以及其他特性给并发编程带来了…