关于flex布局的深入学习

之前对于flex的学习比较浅层次的，工作中大多数使用

display:flex;
justify-content:center;
align-items:center;

但是遇到更高级的布局或者更灵活的布局，这些基础的flex代码已经不够用了
为此决定深入学习flex布局；
学习flex布局，这里我推荐一个专门学习flex布局的网站
flex学习网站

1.inline-flex

inline-flex：将对象作为内联块级弹性伸缩盒显示

2.order

给3子元素块一个order:-1;此时3就排到最前面；同样如果单独给3一个
ordr:1;那么3子元素会到最后；
order是设置在子元素里面的属性,具体作用是可以决定本身的排列先后顺序

3.align-self

align-self主要用在子元素上，定义flex子项单独在侧轴（纵轴）方向上的对齐方式

4.flex-grow、flex-shrink、flex-basis

第一个属性：flex-basis
flex-basis该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
第二个属性：flex-basis
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
第三个属性：flex-basis
当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小
https://blog.csdn.net/m0_37058714/article/details/80765562

关于flex布局的深入学习相关推荐

flutter listview 滚动到底部_Flutter系列之Flex布局详解
PS:长期坚持是一件很难的事. Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
学习关于display ：flex 布局问题！
很多人不明白这个display:flex是到底是什么东西,如何使用的 . 1.什么是display:flex呢? 答:flex是 flexible box的缩写,意为弹性布局 :这个东西的引入,为 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
轻松学习 Flex 布局的小游戏
轻松学习 Flex 布局的小游戏 Flexbox Froggy,帮助你学习前端 Flex 布局的小游戏,难度不高,趣味性极强! Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 F ...
关于flex布局学习分享
大家好,这里是demo软件园,今天为大家分享的是flex布局. **flex布局:**CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页 ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
前端基础知识学习总结--百分比布局、Flex布局
#博学谷IT学习技术支持# 一.百分比布局:能够使用百分比布局开发网页.百分比布局, 也叫流式布局 .效果: 宽度自适应,高度固定. 二.Flex布局:能够使用Flex布局模型灵活.快速的开发网页 F ...

关于flex布局的深入学习

关于flex布局的深入学习相关推荐

最新文章

热门文章