Flex布局 我会带着你远行 2021-11-17 04:28 322阅读 0赞 ## Flex布局是什么? ## Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 Webkit 内核的浏览器,必须加上`-webkit`前缀。 设为 Flex 布局以后,子元素的`float`、`clear`和`vertical-align`属性将失效。 flex 布局 就像是把一个 你要布局的页面 (某个div) 变成了一个 可以填充的空间 就像他的名字一样 弹性布局,确实很贴切 ,之前的 浮动+定位布局可以用很精准来描述, 现在的flex却有点模糊,但确实很好用 **总结**: flex 布局 就是给一个盒子开启一个布局功能, 开启后(必须先开启给父盒子添加css属性,display:flex) 这个盒子内的所有子盒子 就可以通过给这个父盒子设置css属性来改变布局效果 : * justify-content : center (水平方向居中, 左右靠向中心) * align-items : center (垂直方向居中,上下靠向中心) (单 列/行 情况) * align-content : center (垂直方向居中,上下靠向中心) (多 列/行 情况) * flex-direction : column (改变排列方向,并使上面两项的效果交换) * flex-wrap : wrap (让你的子盒子可以换行) (ps:当开启flex布局后,父盒子内的所有元素会横向排成一行排列,如果你的盒子宽度有限,那么你的所有子盒子就会默认缩小) * flex-flow : column || wrap (改变排列方向 和 换行 的简写) 还可以给这个父盒子的子盒子设置css属性来辅助改变布局效果 : * `order : 0 (默认0,假如有3个子盒子,分别给每个子盒子添加这个属性,谁得值小谁排前面.)(感觉没啥用)` * `flex-grow : 0 (默认0,假如有3个子盒子,分别给每个子盒子添加这个属性,如果父盒子宽90px,每个子盒子宽设置为10px(10px,10px,10px),还有60px没有被盒子覆盖,如果有2个盒子的属性都改为1,那么他俩将平分这60px的空间,这三个子盒子的宽度就会变为 10px,40px,40px , 如果3个盒子的属性都改为1,那么他们3平分 这个三盒子就会变为 30px,30px,30px , 如果有一个盒子的属性为2,一个属性为1,一个属性为0(默认的),那么这三个盒子的宽度就会变为如50px,30px,10px 可以演变一个公式 属性值每增加1子盒子宽度增加量 = [总盒子的宽度-所有子盒子的宽度之和]/所有子盒子的属性值之和)` * `flex-shrink : 1 (默认1,与上面内个正好相反,如果说flex-grow是在空间有空余的时候规定了哪些子盒子可以放大,可以放大多少.那么flex-shrink这个属性就是规定了在不开启换行时,规定了哪些盒子可以缩小,缩小多少,值为0时,代表不缩小)` * `flex-basis : auto (默认auto,用处不大,意思就是在子盒子分配多余空间(放大)或者缩小之前,这个子盒子原本的宽度,根width一样) ` * `flex : auto / none (默认值 0 1 auto,flex-grow,flex-shrink,flex-basis的简写.值 auto==> 1 1 auto, 意思就是有多余空间,需要分摊多余空间的时候这个子盒子占1份,需要缩小宽度的时候,这个盒子也缩小1份,这个盒子的宽度是本来大小.值 none ==> 0 0 auto ,意思就是,你有多余空间,我不放大.你空间不够了,我也不缩小,我就是本来大小谁也影响不了我的大小)` * `align-self : auto (默认值 auto , 添加了这个属性,就意味着这个子盒子要比其他子盒子突出,这个子盒子就可以单独设置它自己的对齐方式)` ps: 属性还有其他的就不列举了,属性值有很多种,总的来说flex还是很好用的,以前不会flex的时候 都是用定位,浮动,maring 等等来布局,现在除了一些必须要定位的元素,其他的都用flex布局了,当然了,对于一些简单的页面不用也是可以的.[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html] 这个是阮一峰大神的 \[flex布局教程:语法篇\]. 转载于:https://www.cnblogs.com/jiazhifeng/p/11231374.html [http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
相关 Flex布局 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool Flex是Fl 超、凢脫俗/ 2022年09月25日 15:26/ 0 赞/ 110 阅读
相关 flex布局 转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布 港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 272 阅读
相关 Flex布局 flex弹性布局 开发工具与关键技术:DW、Flex弹性布局 作者:黄桂康 撰写时间:2019.01.16 (一个网页的 ゝ一纸荒年。/ 2022年03月25日 08:40/ 0 赞/ 213 阅读
相关 flex布局 转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 冷不防/ 2022年03月08日 19:20/ 0 赞/ 174 阅读
相关 Flex布局 首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性: <table> <tbody> <tr> 谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 209 阅读
相关 Flex布局 Flex布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 我会带着你远行/ 2021年11月17日 04:28/ 0 赞/ 323 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 394 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者! 上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 414 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待,/ 2021年06月24日 13:58/ 0 赞/ 495 阅读
相关 flex布局 Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 598 阅读
还没有评论,来说两句吧...