【CSS】精通Flex布局（全）

目录

1. flex布局体验

1.1 传统布局 与 flex布局

1.2 初体验

2. flex布局原理

2.1 布局原理

3. flex布局父项常见属性

3.1 常见父项属性

3.2  属性值

3.3 justify-content 设置主轴上的子元素排列方式

3.4 flex-wrap设置子元素是否换行

3.5 align-items 设置侧轴上的子元素排列方式（单行）

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

3.6 align-content 和 align-items 区别

4. flex布局子项常见属性

4.1 flex属性

4.2 align-self 控制子项自己在侧轴上的排列方式

总结不易！ 本章节对我有很大的收获， 希望对你也是！！！！

1. flex布局体验

1.1 传统布局 与 flex布局

  • 传统布局：兼容性好、布局繁琐、局限性，不能再移动端很好的布局
  • flex弹性布局： 操作方便， 布局极为简单， 移动端应用很广泛， PC端浏览器支持情况较差，IE11或更低版本，不支持或仅部分支持

1.2 初体验

1. 搭建HTML结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 可以让span具有大小 变成行内块元素 */display: flex;width: 80%;height: 300px;background-color: pink;/* 将一行的行内块元素都按等距进行摆放  能自适应页面大小*/justify-content: space-around;}div span {width: 150px;height: 100px;background-color: skyblue;margin-right: 5px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

2. flex布局原理

2.1 布局原理

flex是flexible Box的缩写， 意为“弹性布局”， 用来为盒状模型提供最大的灵活性， 任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设为flex布局以后， 子元素的float、clear 和 vertical-align属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用Flex布局的元素， 称为Flex容器(flex container)， 简称“容器”。它的所有子元素自动成为容器成员， 称为Flex项目（flex item）， 简称“项目”。

  • 体验中div就是flex父容器
  • 体验中span就是子容器flex项目
  • 子容器可以横向排列也可以纵向排列

总结flex布局原理：就是通过给父盒子添加flex属性， 来控制子盒子的位置和排列方式

3. flex布局父项常见属性

3.1 常见父项属性

  • flex-direction: 设置主轴的方向
  • justify-content： 设置主轴上的子元素排列方式
  • flex-wrap： 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式（多行）
  • align-items： 设置侧轴上的子元素排列方式（单行）
  • flex-flow： 复合属性， 相当于同时设置了flex-direction 和 flex-wrap

1. 主轴与侧轴

再flex布局中， 是分为主轴 和 侧轴两个方向， 同样的叫法有： 行和列、x轴和y轴

  • 默认主轴方向就是x轴方向， 水平向右
  • 默认侧轴方向就是y轴方向， 水平向下

3.2  属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意： 主轴和侧轴是会发生变化的，就看flex-direction设置谁为主轴， 剩下的就是侧轴。 而我们的子元素是跟着主轴来排列的。

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 给父级添加flex属性 默认是沿着x轴 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默认是沿着x轴 row 那么y轴就是侧轴喽 *//* 我们元素是跟着主轴排列的 *//* flex-direction: row; *//* 横向 翻转 *//* flex-direction: row-reverse; *//* 我们可以把主轴设置为y轴 那么x轴就形成了侧轴 */flex-direction: column;}div span {width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

3.3 justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目再主轴上的对齐方式

注意： 使用这个属性之前一定要确定好主轴是哪个

属性值说明
flex-start默认值从头部开始 如果主轴是x轴， 则从左到右
flex-end

从尾部开始排列

center再主轴居中对齐（如果主轴是x轴 水平居中）
space-around平分剩余的空间
space-between先两边贴边 再平分剩余空间（重要）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 给父级添加flex属性 默认是沿着x轴 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默认的主轴是x轴 row */flex-direction: row;/* justify-content: 是设置主轴上子元素的排列方式; *//* justify-content: flex-start; *//* justify-content: flex-end; *//* 让我们子元素居中对齐 *//* justify-content: center; *//* 平分剩余空间 *//* justify-content: space-around; *//* 先两边贴边 再平分剩余空间 */justify-content: space-between;}div span {width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

当我把主轴改为y轴时， flex布局仍然时同样的效果！

2. 普通布局中 当4个span盒子宽度大于div盒子宽度的时候 其中span盒子就会掉下来！

再flex布局中 就不会存在这种情况：原本span宽度是200的 却被修改到了150 然后刚好能够在这一行内沾满！

3.4 flex-wrap设置子元素是否换行

默认情况下， 项目都排在一条线（又称“轴线”）上。 flex-wrap属性定义， flex布局中默认是不换行的。

属性值说明
nowrap默认值 不换行
wrap换行

3.5 align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项的时候使用

属性值说明
flex-start默认值 从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸

要求：想让三个盒子同时水平居中并且垂直居中！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 给父级添加flex属性 默认是沿着x轴 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默认主轴是x轴 row */justify-content: center;/* 沿主轴来对齐 *//* 我们需要一个侧轴居中 */align-items: center;}div span {/* display: inline-block; */width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

同理： 如果要三个盒子竖着水平居中 并且 垂直居中

只需要把三个横向的盒子扭过来就ok！

  flex-direction: column; // 修改盒子的主轴为y轴

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 给父级添加flex属性 默认是沿着x轴 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默认主轴是x轴 row */flex-direction: column;justify-content: center;/* 沿主轴来对齐 *//* 我们需要一个侧轴居中 */align-items: center;/* 沿着侧轴顶部 *//* align-items: flex-start; *//* 拉伸 子盒子不能有高度 *//* align-items: stretch; */}div span {/* display: inline-block; */width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

拉伸：子盒子拉伸高度跟父盒子一样 

子盒子不能给高度！

      /* 拉伸 子盒子不能有高度 */align-items: stretch;

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度

多行！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 给父级添加flex属性 默认是沿着x轴 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 换行 */flex-wrap: wrap;/* 多行 *//* 因为有了换行 此时我们侧轴上控制子元素的对齐方式 我们用 align-content *//* align-content: flex-start; *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: skyblue;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
</body></html>




3.6 align-content 和 align-items 区别

  • align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  • align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找 align-items 多行找 align-content


 

3.7 flex-flow 是 flex-dirction 和 flex-wrap属性的复合属性 合写

      /* 设置主轴为列 换列 */

      /* flex-direction: column;

      flex-wrap: wrap; */

      /* flex-flow 是 flex-dirction 和 flex-wrap属性的复合属性 合写 */

      flex-flow: column wrap;

  • flex-direction:设置主轴的方向
  • justify-content:设置生轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

4. flex布局子项常见属性

4.1 flex属性

flex属性定义子项目分配剩余空间， 用flex来表示占多少份数

.item {flex: <number>; /* default 0 */
}

这就是淘宝界面有名的圣杯布局：左右两侧沾满后 中间留下的剩余空间就是给div2 来进行占用的份数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {/* 3个span 平均分成了3等分 */flex: 1;}p span:nth-child(2) {/* 2号占两份 */flex: 2;background-color: skyblue;}</style>
</head><body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p>
</body></html>

4.2 align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

每次都是所有盒子一起移动， 那么有没有什么办法能让一个盒子单独移动呢？？

    div {display: flex;width: 80%;height: 300px;background-color: pink;align-items: flex-end;}div span {width: 150px;height: 100px;background-color: skyblue;margin: 5px;}

有的兄弟有的！！！我们只想让3号盒子移动下来

    div {display: flex;width: 80%;height: 300px;background-color: pink;/* align-items: flex-end; */}div span {width: 150px;height: 100px;background-color: skyblue;margin: 5px;}div span:nth-child(3) {align-self: flex-end;}

将2号盒子往前移动

    div span:nth-child(2) {

      order: -1;

    }

总结不易！ 本章节对我有很大的收获， 希望对你也是！！！！

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

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

相关文章

力扣第447场周赛

力扣第447场周赛

这次终于赶上力扣的周赛了, 赛时成绩如下(依旧还是三题 )&#xff1a; 1. 统计被覆盖的建筑 给你一个正整数 n&#xff0c;表示一个 n x n 的城市&#xff0c;同时给定一个二维数组 buildings&#xff0c;其中 buildings[i] [x, y] 表示位于坐标 [x, y] 的一个 唯一 建筑。 如…
阅读更多...
AI中常用概念的理解

AI中常用概念的理解

1. RAG&#xff08;检索增强生成&#xff09; 通俗理解&#xff1a;就像你写作业时&#xff0c;先查课本 / 百度找资料&#xff0c;再根据资料写答案&#xff0c;而不是纯靠记忆瞎编。 AI 模型&#xff08;比如 ChatGPT&#xff09;回答问题时&#xff0c;先去 “数据库 / 互联…
阅读更多...
SQLServer多版本兼容Java方案和数据采集

SQLServer多版本兼容Java方案和数据采集

Maven引入 <dependency><groupId>com.microsoft.sqlserver</groupId><artifactId>sqljdbc4</artifactId><version>4.0</version></dependency><dependency><groupId>net.sourceforge.jtds</groupId><ar…
阅读更多...
【每日八股】复习 Redis Day4：线程模型

【每日八股】复习 Redis Day4：线程模型

文章目录 复习 Redis Day4&#xff1a;线程模型介绍一下 Redis 的线程模型核心线程模型&#xff08;Redis 6.0 之前&#xff09;Redis 6.0 的多线程改进Redis 真的是单线程吗&#xff1f;Redis 的线程模型剖析 上一篇 Redis 的应用我今天才完成&#xff0c;因此明天一并复习 Re…
阅读更多...
树莓派智能摄像头实战指南：基于TensorFlow Lite的端到端AI部署

树莓派智能摄像头实战指南：基于TensorFlow Lite的端到端AI部署

引言&#xff1a;嵌入式AI的革新力量 在物联网与人工智能深度融合的今天&#xff0c;树莓派这一信用卡大小的计算机正在成为边缘计算的核心载体。本文将手把手教你打造一款基于TensorFlow Lite的低功耗智能监控设备&#xff0c;通过MobileNetV2模型实现实时物体检测&#xff0…
阅读更多...
vs2019编译occ7.9.0时，出现fatal error C1060: compiler is out of heap space

vs2019编译occ7.9.0时，出现fatal error C1060: compiler is out of heap space

问题描述 visual studio 2019编译opencascade 7.9.0时&#xff0c;出现编译错误 fatal error C1060: compiler is out of heap space 解决方案 修改vs2019并行编译的线程个数&#xff0c;默认是12个&#xff0c;我改成了4个&#xff0c;问题解决 Tools > Project and Sol…
阅读更多...
vue跨域问题总结笔记

vue跨域问题总结笔记

目录 一、Websocket跨域问题 1.nginx配置 2.VUE CLI代理 3.env.development配置 4.nginx日志 5.解决 一、解决跨域的几种常用方法 1.Vue CLI代理 2.JSONP 3.WebSocket 4.NGINX解决跨域问题 6.Java解决跨域 二、Vue跨域问题详解 1. 什么是跨域 2. 跨域的例子 3.…
阅读更多...
数据结构篇：线性表的另一表达—链表之单链表(下篇)

数据结构篇：线性表的另一表达—链表之单链表(下篇)

目录 1.前言 2.是否使用二级指针 3.插入/删除 3.1 pos位置前/后插入 3.2 查找函数 3.3 pos位置删除 3.4 pos位置后面删除 3.5 函数的销毁 4.断言问题 4.1 断言pphead 4.2 断言*pphead 5.三个文件的代码 5.1 头文件 5.2 具体函数实现 5.3 测试用例 1.前言 之前是讲…
阅读更多...
完美解决react-native文件直传阿里云oss问题一

完美解决react-native文件直传阿里云oss问题一

前言 通常情况下&#xff0c;作为前后端分离的项目来说&#xff0c;文件上传是最寻常的功能之一。虽然每个公司选择的文件管理云库各不相同&#xff0c;但实现思路基本一致。我所在公司使用阿里云oss文件管理&#xff0c;之前服务端做了透传&#xff0c;但是由于每个测试环境的…
阅读更多...
5.运输层

5.运输层

5. 运输层 1. 概述 第2~4章依次介绍了计算机网络体系结构中的物理层、数据链路层和网络层&#xff0c;它们共同解决了将主机通过异构网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信然而在计算机网络中实际进行通信的真正实体&#xff0c;是位于通信两端主机中的…
阅读更多...
告别手动时代！物联网软件开发让万物自动互联

告别手动时代！物联网软件开发让万物自动互联

清晨&#xff0c;智能窗帘随着阳光自动拉开&#xff1b;运动时&#xff0c;手表精准记录着健康数据&#xff1b;回到家&#xff0c;室温早已调节至最舒适状态...这些场景的实现&#xff0c;都离不开物联网软件开发的技术支撑。在智能家居软件开发、智能穿戴软件开发、医疗器械软…
阅读更多...
Fiori学习专题十二：Shell Control as Container

Fiori学习专题十二：Shell Control as Container

为了让我们的app更加适应不同的设备&#xff0c;这节课我们引入shell控件作为根元素 1.修改App.view.xml&#xff0c;加入Shell控件 <mvc:ViewcontrollerName"ui5.walkthrough.controller.App"xmlns"sap.m"xmlns:mvc"sap.ui.core.mvc"displa…
阅读更多...
AI 与高性能计算的深度融合：开启科技新纪元

AI 与高性能计算的深度融合：开启科技新纪元

在当今科技迅猛发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;与高性能计算&#xff08;HPC&#xff09;正以前所未有的态势深度融合&#xff0c;这种融合宛如一场强大的风暴&#xff0c;席卷并重塑着众多领域的格局。从科学研究的突破到商业应用的革新&#xff0c…
阅读更多...
「Unity3D」TextMeshPro使用TMP_InputField实现，输入框高度自动扩展与收缩

「Unity3D」TextMeshPro使用TMP_InputField实现，输入框高度自动扩展与收缩

先看实现效果&#xff1a; 要实现这个效果&#xff0c;有三个方面的问题需要解决&#xff1a; 第一&#xff0c;输入框的高度扩展&#xff0c;内部子元素会随着锚点&#xff0c;拉伸变形——要解决这个问题&#xff0c;需要将内部元素改变父类&#xff0c;然后增加父类高度&am…
阅读更多...
多模态大语言模型arxiv论文略读（四十七）

多模态大语言模型arxiv论文略读（四十七）

AdaShield: Safeguarding Multimodal Large Language Models from Structure-based Attack via Adaptive Shield Prompting ➡️ 论文标题&#xff1a;AdaShield: Safeguarding Multimodal Large Language Models from Structure-based Attack via Adaptive Shield Prompting …
阅读更多...
美的人形机器人即将投入实际应用

美的人形机器人即将投入实际应用

国内家电巨头美的集团近日公布了其自主研发的人形机器人的具体落地计划。根据公司披露的信息&#xff0c;这款机器人将于5月在湖北荆州的洗衣机工厂率先投入使用&#xff0c;承担设备运维、质量检测和物料搬运等工作任务。预计今年下半年&#xff0c;该机器人还将进入美的线下门…
阅读更多...
从零开始搭建你的个人博客：使用 GitHub Pages 免费部署静态网站

从零开始搭建你的个人博客：使用 GitHub Pages 免费部署静态网站

&#x1f310; 从零开始搭建你的个人博客&#xff1a;使用 GitHub Pages 免费部署静态网站 在互联网时代&#xff0c;拥有一个属于自己的网站不仅是一种展示方式&#xff0c;更是一种技术能力的体现。今天我们将一步步学习如何通过 GitHub Pages 搭建一个免费的个人博客或简历…
阅读更多...
canvas动画：点随机运动 距离内自动连接成线 鼠标移动自动吸附附近的点

canvas动画：点随机运动 距离内自动连接成线 鼠标移动自动吸附附近的点

思路/实现步骤 创建canvas元素 获取canvas的上下文ctx 初始化点的信息&#xff08;数量、初始坐标、移动方向、移动速度、大小、颜色&#xff09; 绘制点 绘制点之间的连线 点有规律的动起来 动画循环 鼠标移动相关逻辑 点鼠标之间连线 鼠标吸附逻辑 添加配置项 重绘…
阅读更多...
2025年4月AI科技领域周报（4.21-4.27）：大模型生态加速演进 通用AI开启产业融合新范式

2025年4月AI科技领域周报（4.21-4.27）：大模型生态加速演进 通用AI开启产业融合新范式

2025年4月AI科技领域周报&#xff08;4.21-4.27&#xff09;&#xff1a;大模型生态加速演进 通用AI开启产业融合新范式 一、本周热点回顾1. OpenAI发布全球首款通用AI芯片「GPT-NPU」 重塑AI算力架构2. 谷歌DeepMind发布医疗AI系统「Med-Pathfinder」 实现全科室智能诊断3. 微…
阅读更多...
【Bash】可以请您解释性地说明一下“2＞1”这个语法吗？

【Bash】可以请您解释性地说明一下“2＞1”这个语法吗？

Qwen3-235B 当然可以&#xff01;我们一步步拆解 2>&1 的含义&#xff0c;用生活化的例子来理解它&#xff1a; &#x1f9e0; 前提知识&#xff1a;三个“水流通道” 在 Linux/Unix 系统中&#xff0c;程序运行时有三种默认的“水流通道”&#xff1a; 标准输入&…
阅读更多...
最新文章

Copyright @ 2022~2023