前端学习＜二＞CSS基础——13-CSS3属性：Flex布局图文详解

news2024/11/27 19:49:25

前言

CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。

flex 初体验

我们先来看看下面这个最简单的布局：

上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。

在此基础之上，如果我给父容器仅仅加一个 display: flex属性，此时，这些子元素的布局会摇身一变：

没错，子元素们会在水平方向上，从左至右排列，就是这么神奇。到此为止，你已经掌握了关于 flex 的一半的知识。

flex 布局的优势

1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。

但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。

2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。

flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。

flex 的兼容性问题

上图中可以看到， flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。

但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。

概念：弹性盒子、子元素

在讲 flex 的知识点之前，我们事先约定两个概念：

  • 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。

  • 子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。

概念：主轴和侧轴

在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。

在此，我们引入主轴和侧轴的概念。

如上图所示：

  • 主轴：flex容器的主轴，默认是水平方向，从左向右。

  • 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并不是固定不变的，可以通过 flex-direction 更换方向，我们在后面会讲到。

弹性盒子

声明定义

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。

备注：一般是用 display:flex这个属性。display:inline-flex用得较少。

flex-direction 属性

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值描述
row从左到右水平排列子元素（默认值）
column从上到下垂直排列子元素
row-reverse从右向左排列子元素
column-reverse从下到上垂直排列子元素

备注：如果我们不给父容器写flex-direction这个属性，那么，子元素默认就是从左到右排列的。

代码演示：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";
            font-size:22px;
        }
 ​
         h3{
             font-weight: normal;
         }
         section{
             width: 1000px;
 ​
             margin:40px auto;
         }
 ​
         ul{
             background-color: #fff;
             border: 1px solid #ccc;
 ​
         }
 ​
         ul li{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin:10px;
         }
         section:nth-child(1) ul{
             overflow: hidden; /* 清除浮动 */
         }
         section:nth-child(1) ul li{
             float: left;
         }
         /* 设置伸缩盒子*/
         section:nth-child(2) ul{
             display: flex;
         }
 ​
         section:nth-child(3) ul{
             /* 设置伸缩布局*/
             display: flex;
             /* 设置主轴方向*/
             flex-direction: row;
         }
 ​
         section:nth-child(4) ul{
             /* 设置伸缩布局*/
             display: flex;
             /* 设置主轴方向 :水平翻转*/
             flex-direction: row-reverse;
         }
 ​
         section:nth-child(5) ul{
             /* 设置伸缩布局*/
             display: flex;
             /* 设置主轴方向 :垂直*/
             flex-direction: column;
         }
 ​
         section:nth-child(6) ul{
             /* 设置伸缩布局*/
             display: flex;
             /* 设置主轴方向 :垂直*/
             flex-direction: column-reverse;
         }
     </style>
 </head>
 <body>
     <section>
         <h3>传统布局</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>伸缩布局 display:flex</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴方向 flex-direction:row</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴方向 flex-direction:row-reverse</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴方向 flex-direction:column</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴方向 flex-direction:column-reverse</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 </body>
 </html>

flex-wrap 属性

flex-wrap：控制子元素溢出时的换行处理。

justify-content 属性

justify-content：控制子元素在主轴上的排列方式。

弹性元素

justify-content 属性

  • justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：

    • flex-start 从主轴的起点对齐（默认值）

    • flex-end 从主轴的终点对齐

    • center 居中对齐

    • space-around 在父盒子里平分

    • space-between 两端对齐 平分

代码演示：（在浏览器中打开看效果）

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style:none;}
         body{
             background-color: #eee;
             font-family: "Microsoft Yahei";
 ​
         }
         section{
             width: 1000px;
             margin:50px auto;
         }
         section h3{
             font-size:22px;
             font-weight: normal;
         }
 ​
         ul{
             border: 1px solid #999;
             background-color: #fff;
             display: flex;
 ​
         }
 ​
         ul li{
             width: 200px;
             height: 200px;
             background: pink;
             margin:10px;
 ​
         }
 ​
         section:nth-child(1) ul{
             /* 主轴对齐方式：从主轴开始的方向对齐*/
             justify-content: flex-start;
         }
 ​
         section:nth-child(2) ul{
             /* 主轴对齐方式：从主轴结束的方向对齐*/
             justify-content: flex-end;
         }
 ​
         section:nth-child(3) ul{
             /* 主轴对齐方式：居中对齐*/
             justify-content: center;
         }
 ​
         section:nth-child(4) ul{
             /* 主轴对齐方式：在父盒子中平分*/
             justify-content: space-around;
 ​
            }
 ​
         section:nth-child(5) ul{
             /* 主轴对齐方式：两端对齐 平分*/
             justify-content: space-between;
         }
     </style>
 </head>
 <body>
     <section>
         <h3>主轴的对齐方式：justify-content:flex-start</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴的对齐方式：justify-content:flex-end</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴的对齐方式：justify-content:center</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴的对齐方式：justify-content:space-round</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
     </section>
 ​
     <section>
         <h3>主轴的对齐方式：justify-content:space-bettwen</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
     </section>
 </body>
 </html>

align-items 属性

align-items：设置子元素在侧轴上的对齐方式。属性值可以是： - flex-start 从侧轴开始的方向对齐 - flex-end 从侧轴结束的方向对齐 - baseline 基线 默认同flex-start - center 中间对齐 - stretch 拉伸

代码演示：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style:none;
         }
         body{
             background-color: #eee;
             font-family: "Microsoft Yahei";
 ​
         }
         section{
             width: 1000px;
             margin:50px auto;
         }
         section h3{
             font-size:22px;
             font-weight: normal;
         }
 ​
         ul{
             border: 1px solid #999;
             background-color: #fff;
             display: flex;
             height:500px;
 ​
         }
 ​
         ul li{
             width: 200px;
             height: 200px;
             background: pink;
             margin:10px;
 ​
         }
 ​
         section:nth-child(1) ul{
             /* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
             align-items:flex-start;
         }
 ​
         section:nth-child(2) ul{
             /* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
             align-items:flex-end;
         }
 ​
         section:nth-child(3) ul{
             /* 侧轴对齐方式 ：居中*/
             align-items:center;
         }
 ​
         section:nth-child(4) ul{
             /* 侧轴对齐方式 ：基线 默认同flex-start*/
             align-items:baseline;
         }
 ​
         section:nth-child(5) ul{
             /* 侧轴对齐方式 ：拉伸*/
             align-items:stretch;
 ​
         }
 ​
         section:nth-child(5) ul li{
             height:auto;
         }
 ​
 ​
     </style>
 </head>
 <body>
 <section>
     <h3>侧轴的对齐方式:align-items ：flex-start</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 <section>
     <h3>侧轴的对齐方式：align-items:flex-end</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 <section>
     <h3>侧轴的对齐方式：align-items:center</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 <section>
     <h3>侧轴的对齐方式：align-itmes:baseline</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 <section>
     <h3>侧轴的对齐方式：align-itmes: stretch</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 </body>
 </html>

flex属性：设置子盒子的权重

代码演示：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style:none;
         }
         body{
             background-color: #eee;
             font-family: "Microsoft Yahei";
 ​
         }
         section{
             width: 1000px;
             margin:50px auto;
         }
         section h3{
             font-size:22px;
             font-weight: normal;
         }
 ​
         ul{
             border: 1px solid #999;
             background-color: #fff;
             display: flex;
 ​
         }
 ​
         ul li{
             width: 200px;
             height: 200px;
             background: pink;
             margin:10px;
 ​
         }
 ​
         section:nth-child(1) ul li:nth-child(1){
             flex:1;
         }
 ​
         section:nth-child(1) ul li:nth-child(2){
             flex:1;
         }
 ​
         section:nth-child(1) ul li:nth-child(3){
             flex:8;
         }
 ​
         section:nth-child(2) ul li:nth-child(1){
 ​
         }
 ​
         section:nth-child(2) ul li:nth-child(2){
             flex:1;
         }
 ​
         section:nth-child(2) ul li:nth-child(3){
            flex:4;
         }
 ​
 ​
     </style>
 </head>
 <body>
 <section>
     <h3>伸缩比例:flex</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 <section>
     <h3>伸缩比例:flex</h3>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </section>
 ​
 ​
 </body>
 </html>

相关链接

CSS Flexbox 可视化手册

可视化的截图如下：（请点开链接，查看大图）

http://img.smyhvae.com/20190821_2101.png

相关文章：

  • 【英文原版】 CSS Flexbox Fundamentals Visual Guide：https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac

  • 【中文翻译】CSS Flexbox 可视化手册：CSS Flexbox 可视化手册 - 知乎

flex 相关的推荐文章

  • flex 效果在线演示：https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

  • A Complete Guide to Flexbox | 英文原版：A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

  • CSS3 Flexbox 布局完全指南 | 中文翻译：https://www.html.cn/archives/8629

flex 相关的教程

  • 后盾人 flex 教程

技巧：使用 margin 自动撑满剩余空间

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

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

相关文章

【蓝桥杯嵌入式】六、真题演练（一）-1演练篇：第 届真题

【蓝桥杯嵌入式】六、真题演练（一）-1演练篇：第 届真题

温馨提示&#xff1a; 真题演练分为模拟篇和研究篇。本专栏的主要作用是记录我的备赛过程&#xff0c;我打算先自己做一遍&#xff0c;把遇到的问题和不同之处记录到演练篇&#xff0c;然后再返回来仔细研究一下&#xff0c;找到最佳的解题方法记录到研究篇。 解题记录&#x…
阅读更多...
了解 LoadRunner 性能测试软件及其基础使用

了解 LoadRunner 性能测试软件及其基础使用

目录 一、了解LoadRunner 1、什么是Loadrunner&#xff1f; 2、Loadrunner包括什么组件&#xff1f; &#xff08;1&#xff09;前台组件 &#xff08;2&#xff09;后台组件 二、LoadRunner三大组件 1、VuGen&#xff08;虚拟用户脚本生成器&#xff09; &#xff08;…
阅读更多...
2024全开源小狐狸ai付费创作系统V2.8.0

2024全开源小狐狸ai付费创作系统V2.8.0

源码介绍 小狐狸GPT付费体验系统的开发基于国外很火的ChatGPT&#xff0c;这是一种基于人工智能技术的问答系统&#xff0c;可以实现智能回答用户提出的问题。相比传统的问答系统&#xff0c;ChatGPT可以更加准确地理解用户的意图&#xff0c;提供更加精准的答案。同时&#x…
阅读更多...
算法---动态规划练习-10（删除并获得点数）

算法---动态规划练习-10（删除并获得点数）

题目 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 rob_s函数&#xff1a;这个函数实现了经典的"打家劫舍"问题的算法。使用动态规划的思想&#xff0c;通过填表的方式计算在给定范围内能够获取的最大点数。 f和…
阅读更多...
Windows入侵排查

Windows入侵排查

目录 0x00 前言 0x01 入侵排查思路 1.1 检查系统账号安全 1.2 检查异常端口、进程 1.3 检查启动项、计划任务、服务 0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时&#xff0c;急需第一时间进行处理&#xff0c;使企业的网络信息系统在最短时…
阅读更多...
PAT（多路复用）配置

PAT（多路复用）配置

PAT&#xff08;多路复用&#xff09; 核心&#xff1a;多个内网IP对应一个公共IP 如下图&#xff1a; 配置命令&#xff1a; 第一步&#xff08;定义访问控制列表&#xff09; access-list 编号 permit 网络地址 反掩码 第二步&#xff08;定义合法的外部IP&#xff09; ip …
阅读更多...
杰发科技——Jlink插件使用

杰发科技——Jlink插件使用

0. 简介 杰发自带的烧录工具是ATCLink&#xff0c;基于DapLink适配。个人不太喜欢ATCLink&#xff0c;推荐使用Jlink&#xff0c;毕竟自己买&#xff0c;不用问原厂要&#xff0c;而且带Jlink&#xff0c;至少5Mhz以上。 V9烧录器使用7.50以下版本驱动。 V11烧录器可以使用7…
阅读更多...
JavaSE：继承和多态（下篇）

JavaSE：继承和多态（下篇）

目录 一、前言 二、多态 &#xff08;一&#xff09;多态的概念 &#xff08;二&#xff09;多态实现条件 &#xff08;三&#xff09;多态的优缺点 三、重写 &#xff08;一&#xff09;重写的概念 &#xff08;二&#xff09;重写的规则 &#xff08;三&#xff09;重…
阅读更多...
AtCoder+ABC129_Typical Stairs

AtCoder+ABC129_Typical Stairs

题目描述 有一个有 N 级台阶的楼梯。高桥现在站在楼梯的脚下&#xff0c;也就是第0个台阶上。他可以一次爬上一个或两个台阶。 但是&#xff0c;编号为a[1] ~ a[m]台阶的踏板都坏了&#xff0c;所以踏上这些台阶很危险。 在不踏上坏掉的台阶的情况下&#xff0c;有多少中方案…
阅读更多...
《书生·浦语大模型全链路开源开放体系》学习笔记

《书生·浦语大模型全链路开源开放体系》学习笔记

书生浦语大模型全链路开源开放体系-学习笔记 大模型成为发展通用人工智能的重要途径专用模型通用大模型 书生大模型开源历程InternLM2回归语言建模的本质主要亮点性能全方位提升强大的内生计算能力 从模型到应用典型流程全链条开源开放体系数据数据集获取预训练微调XTuner 评测…
阅读更多...
unipush 2.0流程及踩坑记录（后端调用接口，前端推送）

unipush 2.0流程及踩坑记录（后端调用接口，前端推送）

unipush 在线离线示例 在DCLOUD开发者中心里面创建unipush的应用 如果遇到选择Android 包名后没有自动生成Android 应用签名的话&#xff0c;就是下图这样的。 这个情况多半就是通过直接创建云端证书造成的&#xff0c;没有编辑应用信息 没有云端证书的看这里 在我的应用&…
阅读更多...
62岁「御用变态佬」近况曝光。

62岁「御用变态佬」近况曝光。

现年62岁的吴毅将于90年代活跃于香港影坛&#xff0c;因经常扮演黑社会大佬、变态色魔等角色&#xff0c;而被封为影坛御用恶人&#xff0c;其反派形象亦深入民心。北上发展多年的吴毅将&#xff0c;近年不时在内地登台&#xff0c;不过日前却有一段他在台上发恶闹观众的片段被…
阅读更多...
作业 二维数组-定位问题

作业 二维数组-定位问题

图形相似度 描述 给出两幅相同大小的黑白图像&#xff08;用0-1矩阵&#xff09;表示&#xff0c;求它们的相似度。 说明&#xff1a;若两幅图像在相同位置上的像素点颜色相同&#xff0c;则称它们在该位置具有相同的像素点。 两幅图像的相似度定义为相同像素点数占总像素点数…
阅读更多...
Linux下开发调试C++代码的三种方法

Linux下开发调试C++代码的三种方法

目录 准备程序配置vscode的json文件调试使用GDB命令行调试使用core文件调试 一般来说&#xff0c;Linux下做C开发都是用vscode远程连接的方式&#xff0c;这时候调试有三种方式&#xff1a;配置vscode的json文件调试、GDB命令行调试、通过core文件调试。 关于这三种调试方法的…
阅读更多...
ssm停车场管理系统

ssm停车场管理系统

点赞收藏关注 → 私信领取本源代码、数据库 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于停车场管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了停…
阅读更多...
【PHP编程使用UI框架】——GET和POST的请求方法

【PHP编程使用UI框架】——GET和POST的请求方法

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…
阅读更多...
VIVADO IBERT学习

VIVADO IBERT学习

V7的IBERT可以用来测试误码&#xff0c;但是使用中有诸多限制&#xff0c;例化工程测试下效果。 1.IP中例化一个IBERT 2.QUAD代表包含几个4lane的PLL&#xff0c;因为QPLL下面挂4个lane&#xff0c;一个bank包含4条&#xff0c;所以就是bank数量。如果协议层例化为2个&#x…
阅读更多...
SQLite版本3中的文件锁定和并发(七）

SQLite版本3中的文件锁定和并发(七）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;自己编译SQLite或将SQLite移植到新的操作系统&#xff08;六&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 正文&#xff1a; 1.0 SQLite 版本 3 中的文件锁定和并发 SQLite 版本 3.0.0 引入了新的锁…
阅读更多...
MySQL（常用函数、多表查询）

MySQL（常用函数、多表查询）

文章目录 1.数据库函数1.count函数案例答案count&#xff08;*&#xff09;与count&#xff08;列&#xff09;的区别 2.sum函数案例答案 3.avg函数案例答案 4.max/min函数案例答案 5.group by 分组统计案例答案 6.字符串相关函数演示练习 7.数学相关函数演示 8.日期相关函数演…
阅读更多...
基于java+springboot+vue实现的付费自习室管理系统（文末源码+Lw+ppt）23-400

基于java+springboot+vue实现的付费自习室管理系统（文末源码+Lw+ppt）23-400

摘 要 付费自习室管理系统采用B/S架构&#xff0c;数据库是MySQL。网站的搭建与开发采用了先进的java进行编写&#xff0c;使用了springboot框架。该系统从两个对象&#xff1a;由管理员和用户来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;对用户…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023