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

HTML前端开发-- Flex布局详解及实战

引言

Flex布局,全称为Flexible Box Layout,是一种现代CSS布局技术,它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。

一、基本概念

Flex布局的核心是Flex容器(flex container)Flex项目(flex item)。容器是一个使用display: flex;display: inline-flex;声明的元素,而容器的直接子元素自动成为Flex项目。任何一个容器都可以被指定为 flex 布局,这样容器内部的元素就可以使用 flex 来进行布局。

  • 容器(Flex Container):
    使用display: flex;或 行内元素 display: inline-flex;声明的容器。

  • 项目(Flex Item):容器内的直接子元素,自动成为Flex项目。

  • 主轴(Main Axis):Flex项目排列的方向,可以是水平(row)或垂直(column)。

  • 交叉轴(Cross Axis):与主轴垂直的轴。

  • 起点(Start)和终点(End):主轴的起始和结束位置。

  • 中心(Center):主轴和交叉轴的中间位置。
    在这里插入图片描述

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

容器属性( Flex Container)

1. flex-direction

控制主轴的方向,即项目的排列方向。可能的值有row、row-reverse、column和column-reverse

  • row(默认):水平方向,从左到右。
  • row-reverse:水平方向,从右到左。
  • column:垂直方向,从上到下。
  • column-reverse:垂直方向,从下到上。

2. flex-wrap

控制项目是否换行。可能的值有nowrap、wrap和wrap-reverse

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方/左方。
  • wrap-reverse:换行,第一行在下方/右方。

3. flex-flow

是flex-direction和flex-wrap的简写形式,默认值为row nowrap

4. justify-content

控制项目在主轴上的对齐方式。可能的值有flex-start、flex-end、center、space-between、space-around和space-evenly

  • flex-start(默认):项目在主轴起点对齐。
  • flex-end:项目在主轴终点对齐。
  • center:项目在主轴中心对齐。
  • space-between:项目在主轴上均匀分布。
  • space-around:项目在主轴上均匀分布,但两端的间距是项目间距的一半。
  • space-evenly:项目在主轴上均匀分布,包括两端。

5. align-items

控制项目在交叉轴上的对齐方式。可能的值有flex-start、flex-end、center、baseline和stretch

  • flex-start:项目在交叉轴起点对齐。
  • flex-end:项目在交叉轴终点对齐。
  • center:项目在交叉轴中心对齐。
  • baseline:项目在交叉轴的基线对齐。
  • stretch(默认):项目在交叉轴上拉伸以填满容器。

6. align-content

控制多行项目在交叉轴上的对齐方式,适用于项目换行的情况

项目属性 (Flex item)

1. order:

定义项目的排列顺序,数值越小越靠前,默认为0。

2. flex-grow:

定义项目的放大比例,允许项目增长来占据额外空间,默认为0。

3. flex-shrink:

定义项目的缩小比例,允许项目缩小以留出空间,默认为1。

4. flex-basis:

定义项目在主轴上的初始大小,默认值为auto,即项目的本来大小。

5. flex:

flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto。

6. align-self:

允许单个项目有与其他项目不同的对齐方式,覆盖align-items的设置。

二、实战应用

1、圣杯布局(Holy Grail Layout)

圣杯布局是一种常见的网站布局,包括头部、尾部和中间的三栏布局。使用Flex布局可以轻松实现:

<body class="HolyGrail"><header>...</header><div class="HolyGrail-body"><main class="HolyGrail-content">...</main><nav class="HolyGrail-nav">...</nav><aside class="HolyGrail-ads">...</aside></div><footer>...</footer>
</body>
.HolyGrail {display: flex;min-height: 100vh;flex-direction: column;
}
header,
footer {flex: 1;
}
.HolyGrail-body {display: flex;flex: 1;
}
.HolyGrail-content {flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {flex: 0 0 12em;
}
.HolyGrail-nav {order: -1;
}

对于小屏幕,中间的三栏自动变为垂直叠加,通过媒体查询实现响应式设计

2. 百分比布局

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间:

<div class="Grid"><div class="Grid-cell u-1of4">...</div><div class="Grid-cell">...</div><div class="Grid-cell u-1of3">...</div>
</div>
.Grid {display: flex;
}
.Grid-cell {flex: 1;
}
.Grid-cell.u-full {flex: 0 0 100%;
}
.Grid-cell.u-1of2 {flex: 0 0 50%;
}
.Grid-cell.u-1of3 {flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {flex: 0 0 25%;
}

参考文章

1.https://zhuanlan.zhihu.com/p/25303493

相关文章:

HTML前端开发-- Flex布局详解及实战

引言 Flex布局&#xff0c;全称为Flexible Box Layout&#xff0c;是一种现代CSS布局技术&#xff0c;它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。 一、基本概念 Flex布局的核心是Flex容器&#xff08;…...

基于JWT跨语言开发分布式业务系统的挑战与实践:多语言协作的最佳方案

在现代分布式架构下&#xff0c;开发团队往往由来自不同技术栈和开发语言的工程师组成。如何有效地管理这些开发人员的协作&#xff0c;尤其是在实现跨语言的认证与授权机制时&#xff0c;成为了开发者面临的一个重大挑战。JSON Web Token&#xff08;JWT&#xff09;作为一种轻…...

二分法篇——于上下边界的扭转压缩间,窥见正解辉映之光(2)

前言 上篇介绍了二分法的相关原理并结合具体题目进行讲解运用&#xff0c;本篇将加大难度&#xff0c;进一步强化对二分法的掌握。 一. 寻找峰值 1.1 题目链接&#xff1a;https://leetcode.cn/problems/find-peak-element/description/ 1.2 题目分析: 题目要求返回数组内…...

什么是 Kata Containers?

什么是 Kata Containers&#xff1f; Kata Containers 是一种结合了容器技术和虚拟机技术的轻量级运行时&#xff0c;旨在提供容器的速度和虚拟机的安全性。它将容器运行在一个隔离的虚拟机中&#xff0c;从而大幅提升安全性&#xff0c;同时保持容器的高效性。 Kata Contain…...

SpringMvc项目配置RabbitMq

前言&#xff1a;只有消费者部分&#xff0c;没有记录生产者部分 结构图 配置类 可以xml配置&#xff0c;也可以配置类&#xff0c;二者可以相互转化。两种bean注入的方式。 import org.springframework.amqp.rabbit.connection.CachingConnectionFactory; import org.spring…...

shell编程(4)脚本与用户交互以及if条件判断

shell编程&#xff08;4&#xff09;脚本与用户交互以及if条件判断 声明&#xff01; 学习视频来自B站up主 ​泷羽sec​​ 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;…...

vue2组件跨层级数据共享provide 和 inject

在 Vue 2 中&#xff0c;provide 和 inject 的功能也是可以使用的&#xff0c;虽然在 Vue 3 中它们成为了组合式 API 的一部分。在 Vue 2 中&#xff0c;provide 和 inject 主要是用于祖先组件和后代组件之间的数据共享&#xff0c;而不是通过 props 和 emit 逐层传递。 Vue 2…...

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数…...

Redis实现限量优惠券的秒杀

核心&#xff1a;避免超卖问题&#xff0c;保证一人一单 业务逻辑 代码步骤分析 全部代码 Service public class VoucherOrderServiceImpl extends ServiceImpl<VoucherOrderMapper, VoucherOrder> implements IVoucherOrderService {Resourceprivate ISeckillVoucher…...

Linux centOS 7 安装 rabbitMQ

1.安装前需要了解&#xff0c;rabbitmq安装需要先安装erlang&#xff0c;特别注意的是erlang与rabbitmq的版本之间需要匹配。 el/7/rabbitmq-server-3.10.0-1.el7.noarch.rpm - rabbitmq/rabbitmq-server packagecloud 3.10版本的rabbitmq 对于erlang的版本要求可以看此连接…...

活着就好20241202

亲爱的朋友们&#xff0c;大家早上好&#xff01;今天是2024年12月2日&#xff0c;第49周的第一天&#xff0c;也是十二月的第二天&#xff0c;农历甲辰[龙]年十月三十。在这个全新月份的开始、阳光初升的清晨&#xff0c;愿第一缕阳光悄悄探进你的房间&#xff0c;带给你满满的…...

自由学习记录(28)

C# 中的流&#xff08;Stream&#xff09; 流&#xff08;Stream&#xff09;是用于读取和写入数据的抽象基类。 流表示从数据源读取或向数据源写入数据的矢量过程。 C# 中的流类是从 System.IO.Stream 基类派生的&#xff0c;提供了多种具体实现&#xff0c;每种实现都针对…...

操作系统、虚拟化技术与云原生01

操作系统基础 操作系统定义 OS声明了软件怎么调用硬件&#xff0c;同时支持人机交互 人机交互的过程&#xff1a; shell是人机交互转换的虚拟环境&#xff0c;内核只能识别0、1组成的数据流&#xff0c;底层资源只能识别电流的变化 操作系统的组成 1. 进程管理 进程定义&#x…...

linux的挂卸载

挂卸载操作 在 Linux 系统中&#xff0c;挂载&#xff08;mount&#xff09;和卸载&#xff08;umount&#xff09;是管理文件系统和存储设备的核心操作。通过这两个操作&#xff0c;我们可以将设备&#xff08;如硬盘、光盘、U盘等&#xff09;或网络文件系统的内容集成到系统…...

【和春笋一起学C++】OpenCV中数组和指针运用实例

前言&#xff1a;前面学习了数组和指针在C中的处理原理&#xff0c;本文通过自己编写一个图像处理的函数实例来加深对数组和指针的理解。为什么是图像处理呢&#xff0c;因为图像数据是一个二维矩阵&#xff0c;相当于一个二维数组&#xff0c;前面学习了一维数组&#xff0c;现…...

Maya 中创建游戏角色的头发,并将其导出到 Unreal Engine 5

这段视频教程讲解了如何在 Maya 中创建游戏角色的头发&#xff0c;并将其导出到 Unreal Engine 5 中&#xff0c;重点是如何处理头发的物理模拟和材质。 作者 Andrew Giovannini 首先展示了一个已完成的带物理模拟的头发模型&#xff0c;并介绍了他自己的游戏行业背景。然后&a…...

React 路由(React Router):在 React 应用中管理路由

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

SAP-CPI组件Transformation介绍之Converter

1.配置CSV to XML Converter Field Description XML Schema 选择Select按钮,选择合适 XSD 文件. 或者可以选择 Upload from File System 系统中查找合适的XML文件....

Laravel 代理收益排行榜

创建了一个收入表 CREATE TABLE income_logs (id int(11) unsigned NOT NULL AUTO_INCREMENT,order_id int(11) NOT NULL COMMENT 订单ID,type int(11) NOT NULL DEFAULT 0 COMMENT 类型 0 支出 1收入,user_id int(11) NOT NULL COMMENT 消费者用户,price decimal(10,2) NOT…...

LeetCode hot100面试背诵版(自用)

点击题目可以跳转到LeetCode 哈希 两数之和 public int[] twoSum(int[] nums, int target) {int lengthnums.length;int[] ans new int[2];for (int i 0; i <length-1 ; i) {for (int j i1; j < length; j) {if(nums[i]nums[j]target){ans[0]i;ans[1]j;}}}return an…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...