超详细的flex教程（面试必考）

引言

为什么存在？

Flex 布局的出现是为了解决传统 CSS 布局方式（如浮动布局、定位布局等）在处理复杂布局时的诸多限制和不便。

优势
1. 简化布局

Flex 布局的语法简洁明了，代码更易读。

2. 强大的对齐能力

提供丰富的对齐属性，如 justify-content 和 align-items，轻松实现元素的对齐。

3. 响应式设计

天生支持响应式设计，元素可以根据屏幕大小自动调整。

4. 解决传统布局难题

垂直居中

Flex 布局的基本概念

Flex 容器（Flex Container）与 Flex 项目（Flex Item）

在 Flex 布局中，最基本的概念是 Flex 容器和 Flex 项目。

  • Flex 容器（Flex Container）：这是应用了 display: flex 或 display: inline-flex 的元素。它是所有 Flex 项目的父元素，负责控制其子元素的布局。

  • Flex 项目（Flex Item）：这是 Flex 容器的直接子元素。Flex 项目会按照 Flex 容器设置的属性进行排列和对齐。

display: flex 与 display: inline-flex 的区别

display: flex 和 display: inline-flex 都用于定义一个 Flex 容器，但它们在布局上有一些区别：

  • display: flex：将元素定义为块级 Flex 容器。这意味着容器会占据其父容器的整个宽度（除非设置了宽度），并且每个 Flex 容器都会在新行开始。

  • display: inline-flex：将元素定义为行内 Flex 容器。这意味着容器只会根据其内容的大小来占据宽度，并且多个行内 Flex 容器可以排列在同一行中。

Flex 容器与项目的层级关系

Flex 容器和 Flex 项目之间存在层级关系：

1.Flex 容器：作为父元素，负责控制其子元素的布局。它可以设置各种 Flex 属性来影响子元素的排列和对齐。

2.Flex 项目：作为子元素，直接受到 Flex 容器的影响。它们会按照 Flex 容器的设置进行排列和对齐。

示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>/* .flex-container {display: flex; background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1;  } */.flex-container{display: flex;background-color: pink;padding: 10px;}.flex-item {background-color: green;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1;/* max-width: 100px; 扩展，限制最大宽*/}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item">项目 1</div><div class="flex-item">项目 2</div><div class="flex-item">项目 3</div>
</div>
​
</body>
</html>

在这个示例中：

  • .flex-container 是 Flex 容器，设置了 display: flex。

  • .flex-item 是 Flex 项目，直接受到 Flex 容器的控制。

通过调整 Flex 容器的属性，可以控制 Flex 项目的排列和对齐。例如，设置 flex-direction 可以改变项目的排列方向，设置 justify-content 可以控制项目在主轴上的对齐方式，设置 align-items 可以控制项目在交叉轴上的对齐方式。

主轴和交叉轴

在 Flex 布局中，主轴和交叉轴是定义元素排列方式的两个关键概念：

  • 主轴（Main Axis）：是 Flex 项目排列的主要方向，可以通过 flex-direction 设置为水平（默认从左到右）或垂直。

  • 交叉轴（Cross Axis）：与主轴垂直的方向，取决于主轴的方向设置。例如，当主轴为水平时，交叉轴为垂直方向。

设置主轴方向：flex-direction

flex-direction 控制 Flex 容器的主轴方向，有四种取值：

  • row（默认）：主轴为水平方向，起点在左。

    css复制代码.flex-container {display: flex;flex-direction: row;
}

  • row-reverse：主轴为水平方向，起点在右。

    css复制代码.flex-container {display: flex;flex-direction: row-reverse;
}

  • column：主轴为垂直方向，起点在上。

    css复制代码.flex-container {display: flex;flex-direction: column;
}

  • column-reverse：主轴为垂直方向，起点在下。

    css复制代码.flex-container {display: flex;flex-direction: column-reverse;
}
控制换行：flex-wrap

flex-wrap 控制 Flex 项目是否换行：

  • nowrap（默认）：不换行，所有项目都在一行/列。

    css复制代码.flex-container {display: flex;flex-wrap: nowrap;
}

  • wrap：允许换行，项目会自动换到下一行/列。

    css复制代码.flex-container {display: flex;flex-wrap: wrap;
}

  • wrap-reverse：换行方向相反。

    css复制代码.flex-container {display: flex;flex-wrap: wrap-reverse;
}
主轴对齐：justify-content

justify-content 控制项目在主轴上的对齐方式：

  • flex-start：在主轴起点对齐（默认）。

  • flex-end：在主轴终点对齐。

  • center：在主轴中心对齐。

  • space-between：均匀分布，第一个项目在起点，最后一个项目在终点。

  • space-around：均匀分布，每个项目两侧间距相等。

示例：

css复制代码.flex-container {display: flex;justify-content: center;
}
交叉轴对齐：align-items

align-items 控制项目在交叉轴上的对齐方式：

  • flex-start：在交叉轴起点对齐。

  • flex-end：在交叉轴终点对齐。

  • center：在交叉轴中心对齐。

  • baseline：在项目文本基线对齐。

  • stretch（默认）：项目拉伸以填满容器。

示例：

css复制代码.flex-container {display: flex;align-items: center;
}
综合使用

通过组合 flex-direction、flex-wrap、justify-content 和 align-items 等属性，可以轻松实现各种复杂的布局需求，使得 Flex 布局在现代布局中极具灵活性和实用性。

Flex 布局的项目属性

Flex 布局提供了多个属性来控制 Flex 项目的行为和布局。以下是一些常用的项目属性：

1. order：控制项目的排列顺序

order 属性用于定义 Flex 项目在 Flex 容器中的排列顺序。默认情况下，所有项目的 order 值都是 0。数值越小，项目排列越靠前。

.item {order: <integer>; /* 默认值为 0 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
​.item1 {order: 3;}
​.item2 {order: 1;}
​.item3 {order: 2;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 order 值最小，所以它会排在最前面。

2. flex-grow：定义项目的放大比例

flex-grow 属性用于定义 Flex 项目在容器中有剩余空间时的放大比例。默认值为 0，即不放大。

.item {flex-grow: <number>; /* 默认值为 0 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-grow: 1;}
​.item2 {flex-grow: 2;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 flex-grow 值是 2，而其他项目的 flex-grow 值是 1，所以 item2 会占据更多的空间。

3. flex-shrink：定义项目的缩小比例

flex-shrink 属性用于定义 Flex 项目在容器空间不足时的缩小比例。默认值为 1，即项目会根据需要缩小。

.item {flex-shrink: <number>; /* 默认值为 1 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-shrink: 1;}
​.item2 {flex-shrink: 0;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 flex-shrink 值是 0，所以它不会缩小，而其他项目会根据需要缩小。

4.flex-basis：定义项目的初始尺寸

flex-basis 属性用于定义 Flex 项目在主轴方向上的初始尺寸。它可以设置为长度值（如 px, em, %）或 auto。默认值为 auto，即项目的尺寸由内容决定。

.item {flex-basis: <length> | auto; /* 默认值为 auto */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-basis: 100px;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，所有项目的初始尺寸都是 100px。

5. align-self：单独设置项目在交叉轴上的对齐方式

align-self 属性用于单独设置 Flex 项目在交叉轴上的对齐方式。它会覆盖 Flex 容器的 align-items 属性。默认值为 auto，即继承容器的 align-items 属性。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;align-items: center;background-color: #f0f0f0;padding: 10px;height: 200px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
​.item2 {align-self: flex-end;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 align-self 值是 flex-end，所以它会单独对齐到交叉轴的终点，而其他项目会按照容器的 align-items 属性对齐到交叉轴的中心。

总结

优势

简化布局实现

响应式设计

局限性

低端浏览器适配

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

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

相关文章

强化学习DQN实践(gymnasium+pytorch)

强化学习DQN实践(gymnasium+pytorch)

Pytorch官方教程中有强化学习教程&#xff0c;但是很多中文翻译都太老了&#xff0c;里面的代码也不能跑了 这篇blog按照官方最新教程实现&#xff0c;并加入了一些个人理解 工具 gymnasium&#xff1a;由gym升级而来&#xff0c;官方定义&#xff1a;An API standard for rei…
阅读更多...
ubuntu22.04安装向日葵

ubuntu22.04安装向日葵

1、下载deb安装包 进入官网下载图形版本&#xff1a;https://sunlogin.oray.com/download/linux?typepersonal 2、命令行安装 sudo chmod x 文件名.deb sudo dpkg -i 文件名.deb 3、开始报错的看这里&#xff01; 首先展示一下安装成功的效果图&#xff1a; 接下来是我安…
阅读更多...
Vuestic 数据表格 使用demo

Vuestic 数据表格 使用demo

<template><br><div class"grid sm:grid-cols-3 gap-6 mb-6"><VaButton click"()>{for(const it in this.selectedItems){console.log(this.selectedItems);}}">参数设置</VaButton><VaButton>参数刷新</VaButt…
阅读更多...
深入了解 美国高防 CN2 ：如何提升全球化业务的网络安全与性能

深入了解 美国高防 CN2 ：如何提升全球化业务的网络安全与性能

美国高防 CN2 的重要性 在跨国企业和全球化业务的不断扩展下&#xff0c;对高性能和安全的网络连接需求不断增加。美国高防 CN2&#xff08;Global Internet Access&#xff09;以其卓越的跨境传输效率和强大的防护能力&#xff0c;成为许多企业关注的焦点。尤其是对电商、游戏…
阅读更多...
NVR批量管理软件/平台EasyNVR多个NVR同时管理支持视频投放在电视墙上

NVR批量管理软件/平台EasyNVR多个NVR同时管理支持视频投放在电视墙上

在当今智能化、数字化的时代&#xff0c;视频监控已经成为各行各业不可或缺的一部分&#xff0c;无论是公共安全、交通管理、企业监控还是智慧城市建设&#xff0c;都离不开高效、稳定的视频监控系统的支持。而在这些应用场景中&#xff0c;将监控视频实时投放到大屏幕电视墙上…
阅读更多...
新材料产业数据管理：KPaaS平台的创新驱动

新材料产业数据管理：KPaaS平台的创新驱动

近日&#xff0c;工业和信息化部、财政部、国家数据局联合印发《新材料大数据中心总体建设方案》&#xff08;以下简称《建设方案》&#xff09;&#xff0c;为新材料产业的发展注入了强大动力。该方案规划清晰&#xff0c;目标明确&#xff0c;旨在充分发挥大数据、人工智能对…
阅读更多...
AI代币是什么？AI与Web3结合的未来方向在哪里？

AI代币是什么？AI与Web3结合的未来方向在哪里？

近两年随着人工智能的崛起&#xff0c;AI已经渗透到制造业、电商、广告、医药等各个行业&#xff0c;加密货币领域也不例外&#xff0c;人工智能与区块链的融合&#xff0c;让我们看到了独特的数字资产 — AI加密代币。 它的流行始于2022年底&#xff0c;随着OpenAI智能聊天机…
阅读更多...
关于springboot跨域与拦截器的问题

关于springboot跨域与拦截器的问题

今天写代码的时候遇到的一个问题&#xff0c;在添加自己设置的token拦截器之后&#xff0c;报错&#xff1a; “ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:112:14) at Axi…
阅读更多...
基于微信小程序实现信阳毛尖茶叶商城系统设计与实现

基于微信小程序实现信阳毛尖茶叶商城系统设计与实现

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…
阅读更多...
FPGA开发verilog语法基础1

FPGA开发verilog语法基础1

文章目录 主体内容1.1 逻辑值1.2 数字进制格式1.3 数据类型1.3.1 寄存器类型1.3.2 线网类型1.3.3 参数类型1.3.4 存储器类型 参考资料 主体内容 1.1 逻辑值 1&#xff0c;逻辑0&#xff0c;表示低电平 2&#xff0c;逻辑1&#xff0c;表示高电平 3&#xff0c;逻辑X&#xff0…
阅读更多...
Java阶段三02

Java阶段三02

第3章-第2节 一、知识点 面向接口编程、什么是spring、什么是IOC、IOC的使用、依赖注入 二、目标 了解什么是spring 理解IOC的思想和使用 了解IOC的bean的生命周期 理解什么是依赖注入 三、内容分析 重点 了解什么是spring 理解IOC的思想 掌握IOC的使用 难点 理解IO…
阅读更多...
Android Preference浅析（设置Setting）

Android Preference浅析（设置Setting）

各位&#xff0c;好久不见&#xff0c;最近时间较为充裕&#xff0c;更新一下博客。 本篇在我的理解、认识范围内&#xff0c;讲述一下Android中的Preference&#xff08;破粉斯~&#xff09;这玩意&#xff0c;常用于项目中的设置模块中。在工作中我也主要负责了设置模块相关…
阅读更多...
leetcode-120-三角形最小路径和

leetcode-120-三角形最小路径和

题解&#xff1a; 代码&#xff1a;
阅读更多...
鸿道Intewell操作系统架构介绍之Intewell-Hyper I 虚拟化构型

鸿道Intewell操作系统架构介绍之Intewell-Hyper I 虚拟化构型

鸿道Intewell-Hyper I 虚拟化构型是鸿道Intewell-V虚拟化架构下的构型体系&#xff01;鸿道Intewell-V是科东软件自主研发的实时虚拟化操作系统&#xff0c;包括鸿道Intewell-Hyper I 和鸿道Intewell-Hyper II。鸿道Intewell-V可以实现多个操作系统在同一物理硬件上并行运行&am…
阅读更多...
讲一讲 kafka 的 ack 的三种机制？

讲一讲 kafka 的 ack 的三种机制？

大家好&#xff0c;我是锋哥。今天分享关于【K讲一讲 kafka 的 ack 的三种机制&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲一讲 kafka 的 ack 的三种机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka的消息确认机制&…
阅读更多...
多租户系统的应用架构

多租户系统的应用架构

大家好&#xff0c;我是汤师爷~ 我们看下多租户系统的应用架构是如何从一层层构建起来的。 1、应用层设计 应用层的主要作用是为具体的用户场景提供应用服务&#xff0c;帮助用户在特定场景下完成操作。通过编排领域层的各项能力&#xff0c;实现SaaS产品的核心功能。应用层包…
阅读更多...
波兰喜嘎嘎

波兰喜嘎嘎

之前做的一个项目&#xff0c;需要用c写一个服务去访问和控制硬件。这个服务是同事写的&#xff0c;今年年中离职了&#xff0c;很自然地&#xff0c;轮到我接手。 一、认知 我捣鼓了几天&#xff0c;勉强读懂一点原来的代码&#xff0c;并在原来基础上&#xff0c;做了一些修…
阅读更多...
基于LORA的一主多从监测系统_4G模块上巴法云

基于LORA的一主多从监测系统_4G模块上巴法云

临时添加一个更新&#xff0c;更换云平台为巴法云&#xff0c;事情的起因是因为阿里云这个老六&#xff0c;早上睡了一觉起来发短信告诉我云平台给我停了&#xff0c;得交钱&#xff0c;好嘛&#xff0c;不过也没办法现在这基本都收费&#xff0c;当然还有onenet可以用&#xf…
阅读更多...
.NET Core WebApi第4讲：控制器、路由

.NET Core WebApi第4讲：控制器、路由

一、控制器是什么&#xff1f; 1、创建一个空的API控制器&#xff1a;TestController.cs 2、里面有一个类叫TestController&#xff0c;把它叫做控制器 因为它继承了ControllerBase类&#xff0c;ControllerBase类里提供了一系列的方法&#xff0c;使得TestController这个类具…
阅读更多...
Java面试经典 150 题.P55. 跳跃游戏（009）

Java面试经典 150 题.P55. 跳跃游戏（009）

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public boolean canJump(int[] nums) {int…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023