一文搞懂flex布局

已于 2024-06-23 18:25:45 修改
阅读量786 收藏 16
点赞数 22
分类专栏： # css 可视化大屏系列 文章标签： 前端 css
于 2024-06-12 22:15:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pilgrim_121/article/details/139637315
版权

上学读书的时候，学习flex布局，更多停留在理论知识层面。近来，经过工作实践，发现自己对flex布局的理解更加深入，运用起来更加熟练，也越发能感受到flex布局的强大灵活性，特来总结一波。若有错误之处，欢迎指出！

一文搞懂flex布局

知识导图

在这里插入图片描述

基本概念

（1）容器

设置样式属性display:flex的那个父元素

（2）项目

容器内的直接子元素（第一层级）

比如：类名为father的那个元素是容器，类名为son的两个元素是项目。

<div class="father"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
兰兰的风。。。
关注
  • 22
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
一文搞懂 flex 属性
Park_Geun_hye的博客
03-02 606
1. flex 属性简介 flex-grow：扩展子元素长度 flex-shrink：收缩子元素长度 flex-basic：设置子元素长度 flex-grow 和 flex-shrink 属性是基于父元素的长度进行计算的 flex-basic 实际上就是给子元素设定默认值，可以理解为直接他宽高设定默认值 建议概念比较模糊的同学先不要合起来使用 flex 属性，如 flex: 0 1 auto 因为...
入坑前端：一文搞懂 Flex 布局
qq_60848699的博客
01-28 6183
前言 Flex 这个布局前前后后看了3次，第一次学的时候，发现有十几个属性值没耐心看完就没往下学了，作罢。第二次去看的时候大概搞明了Flex每个属性的用法，可没过几天又全部忘光了。第三次了解 Flex，于是就有了这篇笔记。估计是全网最易懂的Flex布局的文章。 前端布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。Flex 布局可以通过简单的属性灵活实现复杂的响应式布局。 当你会了Flex布局后，几乎所有布局都可以通过Flex解决..
一文彻底搞懂flex布局
Asen-coder的博客
05-28 1313
# `CSS3`新增布局之一：`flex`布局 ## flex背景 flex 布局背后的**主要思想**是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。 最重要的是，与常规布局（基于垂直的块和基于水平的内联）相反，**弹性盒布局与方向无关**。虽然这些适用于页面，但它们缺乏灵活性来支持大型或复杂的应用程序（尤其是在涉及方向更改、调整大小、拉伸、收缩等时）。 **注意：** `flexbo
一文看懂flex布局
前端成长之路
04-18 8869
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 flex布局做为前端最为常用的布局方式之一，它的重要性不言而喻，今天我们来分享flex布局的应用； 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib
一篇文章就懂的flex布局
qq_45438471的博客
06-08 1850
有没有人跟我一样当看到justify-content:center与align-items:center这两个属性都一脸蒙圈，傻傻分不清？？？ 那么今天跟着我一起来学习flex布局吧！！！ 1、基本概念 main axis：主轴 cross axis：交叉轴 flex容器中一般有两条轴，一条是主轴，另一条是交叉轴。默认情况下：水平方向是主轴，垂直方向是交叉轴 且容器当中的每个单元称之为flex item（就类似于一个项目），每个项目占主轴的空间称作main size ，在交叉轴方向上占据的空...
一文搞懂Grid 布局
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
一文看透Flex布局及常用属性
bug处理进行时
05-14 2万+
文章目录什么是Flex布局适用范围使用时应该注意些什么？flex布局中的一些基本概念容器和项目项目在容器中的显示容器的一些属性flex-direction 属性flex-wrap属性flex-flow属性justify-content 属性align-items 属性项目的一些属性order属性flex-grow 属性flex-shrink 属性flex-basis属性flex属性align-se...
[万字长文]一文教你彻底搞懂flex布局
SCUhzs
12-09 1284
文章目录Flex布局是什么？Flex 的原理Flex 排版容器属性flex-wrap(使用频率：高)flex-direction(使用频率：高)flex-flow（flex-direction + flex-wrap的简写形式）justify-content(使用频率：非常高)justify-items(使用频率：低)align-items(使用频率：非常高)示例align-content(使用频率：低)示例项目属性order(使用频率：中)flex-grow(使用频率：中)flex-shrink(使用频率
一文掌握flex布局
vike_123的博客
08-26 59
theme: healer-readable 这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战 一文掌握flex布局 开启flex布局 display:flex 常见父项属性 flex-direction 设置主轴方向 主轴分行和列 行 水平向右 列垂直向下 默认的主轴就是行 支持四个属性 row 从左往右(默认) div { ...
一文搞懂Raft算法
01-27
raft是工程上使用较为广泛的强一致性、去中心化、高可用的分布式协议。在这里强调了是在工程上，因为在学术理论界，最耀眼的还是大名鼎鼎的Paxos。但Paxos是：少数真正理解的人觉得简单，尚未理解的人觉得很难，...
一文搞懂混合动力汽车
01-14
经过4S店销售的一顿狂轰乱炸，你还是搞不懂混合动力汽车有插电式与非插电式之分，还有串联式、并联式、混联式的区别。 无妨，接着看下文也许你就懂了！ 混合动力汽车透视图 传统汽车由内燃机燃烧...
一文搞懂C语言回调函数
01-27
回调函数在C语言中是一种强大的编程机制，它允许我们将函数作为参数传递给其他函数，然后在特定条件下由这些函数调用。回调函数的核心是函数指针，它存储了函数的地址，使得其他函数可以通过这个地址来执行指定的...
网络知识扫盲，一文搞懂DNS
01-27
【网络知识扫盲，一文搞懂DNS】 网络知识在面试中扮演着至关重要的角色，尤其是在IT行业。本文旨在帮助那些在网络知识上遇到困难的同学，尤其是关于DNS的基础知识。DNS，全称为Domain Name System，是一种分布式...
在html中如何使div在页面中居中显示
热门推荐
wind的博客
02-28 6万+
在html中如何使div在页面中居中显示 最近无聊中又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页，结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现，因为css还没仔细研究过，等我参加完复试定会仔细探究探究。既然实现了，我就先记录下来，要不然下次又忘了。代码如下（这是一个网页最外层div的css样式）： #all{ width: 80...
如何将图片变为圆形
wind的博客
12-17 6457
1.准备一张图片，用ps打开，选择椭圆边框工具，按住shift画圆： 2.按住ctrl+j，生成新图层1 3.关掉背景图层 4.选择透视裁剪工具，裁剪图片 5.按enter键，然后存储为png格式 结果：
子盒子在父盒子水平垂直方向居中方法总结
wind的博客
12-17 1841
声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！ 实现效果（让绿色盒子（子盒子）显示在红色盒子（父盒子）的中间）： 总的来说，就是子盒子采用绝对定位，父盒子采用相对定位，再回退挪动子盒子宽高的50%即可。 方法1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte.
css选择器相关（三）--- 伪类与伪元素
wind的博客
03-01 1340
:first-child 匹配父元素中第一个子元素 :last-child 匹配父元素中最后一个子元素 :only-child 匹配父元素中仅有一个子元素的p元素 <style> /* 匹配父元素中第一个子元素*/ p:first-child { background-color: yellow; } /* 匹配父元素中最后一个子元素*/ p:last-child { background: pink;.
利用css伪元素画div的四个直角
wind的博客
06-27 983
效果如图： html如下： <!-- pannel就是要被画上四个小直角的div元素--> <div class="pannel"> <div class="panel-footer"></div> </div> css如下： .pannel { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); height: 2.998501re
一文搞懂mysql索引
最新发布
07-20
MySQL索引是一种数据结构，它允许数据库快速查找、排序和定位表中的行。理解MySQL索引有助于提高查询性能，特别是对于大数据量的表。以下是关于MySQL索引的基本概念： 1. **基本类型**： - B树索引：默认索引类型，支持范围查询，适合大部分场景。 - 全文索引：用于文本搜索，如全文关键词搜索。 - 唯一索引：列值唯一，不允许有重复，可以作为主键。 - 空间索引：如SPATIAL INDEX（针对地理位置信息）。 2. **创建索引**： 使用`CREATE INDEX`语句，例如 `CREATE INDEX idx_name ON table_name (column_name)`。 3. **应用场景**： - 对于经常出现在WHERE子句中的字段，应该添加索引。 - 对频繁排序或分组的字段也应建索引。 4. **索引策略**： - 尽量避免在索引列上进行函数操作，如DATE(date)或CONCAT等，因为函数结果不会被索引利用。 - 避免在索引列上进行大量的NULL值，这会降低查询效率。 5. **注意事项**： - 创建过多的索引会占用存储空间，且增加更新数据的时间。 - 如果查询优化器无法选择合适的索引来加速查询，可能会导致性能下降。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值