详细了解flex布局的相关属性

最新推荐文章于 2022-11-25 21:18:09 发布
最新推荐文章于 2022-11-25 21:18:09 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： HTML+CSS 文章标签： css3 Flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq8241994/article/details/106839674
版权
本文详细介绍了Flex布局中的重要属性，包括`display: inline-flex`、`align-items`、`justify-content`、`flex-direction`、`flex-wrap`、`flex-flow`、`order`、`flex-grow`、`flex-shrink`、`flex-basis`和`align-self`。通过实例展示了这些属性如何影响元素的排列和调整，帮助开发者更深入地理解和应用Flex布局。
摘要由CSDN通过智能技术生成

flex布局相信大家已经不陌生了，越来越多的人在开发中使用flex进行自适应的布局。但是呢，有些flex的属性代表什么意思你真的了解吗？下面我就着重说一说不常用的flex属性吧（可能只是我个人不常用  (⊙﹏⊙)）

包含元素设置display: inline-flex

顾名思义包含元素即包含inline的特性也包含flex的特性：

inline-flex:

flex:

aline-items： baseline/flex-start/flex-end

常用的center就不多说了，flex-start是以父元素顶部对齐 flex-end是以父元素底部对齐，baseline是以各个元素的文字的基线对齐

flex-start:

flex-end:

最低0.47元/天 解锁文章
百岁如流富贵冷灰
关注
专栏目录
Flex布局相关属性
weixin_52060922的博客
12-15 566
Flex属性 容器属性：用于规定容器布局方式从而控制内部项目的排列和对齐方式 属性 解释 默认值 其他有效值 flex-direction 项目排列方向 row row-reverse|column|column-reverse flex-wrap 项目是否换行 nowrap wrap|wrap-reverse justify-content 项目在主轴方向上对齐方式 flex-start flex-end|center
flex: 0 0 273px的意思
最新发布
m0_51578916的博客
07-26 338
表示基础尺寸，指定子项在没有任何空间约束时的初始尺寸。在这里设置为273px，表示子项的初始宽度为273像素。: 表示弹性增长因子，指定当有多余空间时，子项能够增长的比例。在这里设置为0，表示子项不会根据剩余空间而增长。: 表示弹性收缩因子，指定当空间不足时，子项能够收缩的比例。在这里设置为0，表示子项不会根据空间不足而收缩。表示这个flex子项在flexbox布局中将保持固定的宽度为273像素，不具备任何弹性增长或收缩的能力。
flex的含义
qq_43372535的博客
12-23 1650
flex的含义：flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可 选。 flex-grow ：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如 果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一 个项目的flex-gro...
移动端web学习06：flex布局 之 flex属性
玉安_ZhangDe的博客
04-18 1284
语法 flex:1; flex:20% 例如： flex:1 代表的意思是占父盒子剩余空间的1份。flex:20%代表占父盒子剩余空间的20% 其实，我更喜欢flex:1 ，在我看来其实就是权重 假如父元素的宽是700px，父元素里面有三个弹性盒子，第一个盒子的宽是100px，第二个盒子不写width 写flex：1，第三个盒子写 flex：2，也就是除了第一个盒子的100px，还剩600px 第二盒子 1份，第三个盒子2份，一共三份，从而根据权重平分， 第二个盒子flex：1代表盒子长度为2
flex:0是什么意思，flex:0在IE11遇到的问题
weixin_42475358的博客
08-31 3929
flex:0是什么意思，flex:0在IE11遇到的问题flex:0表示什么意思flex 各属性含义在ie中遇到的问题 flex:0表示什么意思 flex: 0等同于flex: 0 1 0%，也等同于{flex-grow: 0;flex-shrink: 1;flex-basis: 0%;}。 flex 元素如何根据其在 flex 容器中的所剩空间来动态拉伸或收缩，它是 flex-grow 、 flex-shrink 、 flex-basis 这三个属性的简化版。 单值为number时代表**flex:
CSS day12 移动端布局练习
qq_34620296的博客
09-13 800
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局...无论是Web、App、小程序还是桌面程序，了解并熟练掌握Flex布局都是每个前端开发者必备的技能。
基本布局_flex基本布局模板_flex_
09-30
首先，我们要了解Flex布局的核心概念。Flex布局是CSS3中引入的一种新的布局模式，它使得容器能够调整其子元素的宽度、高度以及顺序，以最佳方式填充可用空间。这在处理不同屏幕尺寸和设备类型时尤其有用，因为它们...
flex布局实战搭建网页页面
01-03
首先，让我们了解Flex布局的核心概念。Flex布局的主要目标是解决传统CSS布局（如Block和Inline）在处理复杂或响应式布局时的局限性。它允许开发者更加灵活地控制容器内元素的排列、对齐和分配空间。 1. **容器属性*...
flex布局布局篇
05-08
了解和掌握Flex布局技术，对于进行响应式网页设计、高效地布局页面元素、优化不同屏幕和分辨率下的页面展示非常有帮助。Flexbox通过简化对齐、分布和排序操作，大大提高了布局的灵活性和控制力。
只需5分钟！一文读懂CSS布局（二） -- flex布局
小丞同学
05-25 4503
一文读懂CSS布局（二） – flex布局 在我们上一篇CSS布局文章中详细的讲解了grid布局，这篇文章就带大家来学习一下flex布局！ 全文思维导图，建议收藏！
flex布局中flex属性的深入探讨
小何程序员的博客
12-21 944
前言 首先我们以一个题目来引出flex属性的使用规则 问题一 如何实现下面图片的效果 首先我们可能会提出一种解决方案 最大的灰色盒子里面包含着三个小盒子，大盒子使用flex布局，然后每个小盒子设置属性flex: 1; 这样即可完成图片效果。代码如下 <style> .main { display: flex; justify-content: center; align-items: center;
flex布局详解
end12356789的博客
11-25 319
flex布局详解
对flex-grow和flex-shrink的深入理解
weixin_30868855的博客
05-07 417
flex弹性布局，如果子元素宽度之和大于或者小于父元素宽度，空间就会存在剩余和不够，flex默认不换行，除非设置flex-wrap,那么这种情况下，有两个重要的属性，flex-grow和flex-shrink. flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间，假如父元素宽度为1000，三个子元素，div1宽度200，div2宽度300，div3宽度300；三个子...
flex详解
weixin_46005406的博客
05-03 261
flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。 flex-grow <style> .box { height: 200px; display: flex; } #box1 { background-color: pink;
flex属性解释
qq_42420490的博客
07-06 509
flex属性 首先，flex属性是flex-grow, flex-shrink 和 flex-basis的简写， 默认值为0 1 auto。后两个属性可选。 flex-grow：扩展多余空间的使用。 默认为0，即，如果存在剩余空间，也不放大； flex-shrink：缩小比例。 默认为1，即，如果空间不足，该项目将缩小； flex-basis：占据的主轴空间。 浏览器根据这个属性，计算主轴是否有多余空间。 默认值为auto，即项目的本来大小。 ...
Flex布局常用的一些属性及解释
10-31 1138
记录一下 忘记的时候翻一下 父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap 下面一个一个进行说明 1.f
CSS flex布局踩坑小记：flex-basis属性之0px与0%的差异
u010951953的博客
04-16 2940
TL;DR: 如果一个元素的 flex-basis属性 的值为百分数，且它父级元素（flex容器）在主轴方向上的尺寸没有被显式设置，此时 flex-basis 的值会被解析为 content。即此种情况下，0% 呈现的结果会与 0px 不同。 文章目录问题复现问题排查解惑我们应该去哪里寻找最准确、最可靠的答案？`flex-basis` 属性的含义？`flex-basis` 值为 `0px`、 `0%` 的差别在哪里？小结在浏览器中，`flex: 1` 的 `flex-basis` 值为什么不是W3C文档中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值