Flex布局 待我称王封你为后i 2021-11-05 15:44 392阅读 0赞 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成主轴和交叉轴,其中主轴方向的定位有三个。 1.**flex-direction**:这个是决定主轴的方向。 **row**(从左到右) |**row-revers**(从右到左)|**column**(从上到下)|**column-revers**(从下到上)。 2.**flex-wrap**:决定是否换行,怎么换行。 **nowrap**(不换行)|**wrap**(换行)|**wrap-revers**(从下向上换行)。 3.**justify-content**:主轴方向上的对齐方式。 **flex-start**(对主轴开始对齐)|**flex-end**(对主轴结束对齐)|flex-content(居中)|**space-between**(两端对齐,中间的间隔平分)|**space-around**(间隔平分)。 交叉轴有六个属性: 1.**align-items**:决定交叉轴上的方向,不是对齐方式。 **flex-start**(对交叉轴开始对齐)|**flex-end**(对交叉轴结束对齐)|flex-content(居中)|**baseline**(按项目中的文字基线来对齐)|**stretch**(默认值,如果没有写项目高度会默认和块元素等高)。 2.**align-content**:交叉轴上的对齐方式。 **flex-start**(对主轴开始对齐)|**flex-end**(对主轴结束对齐)|flex-content(居中)|**space-between**(两端对齐,中间的间隔平分)|**space-around**(间隔平分)|**stretch**(所有的项目平分块的高度) 3.**order**:项目的排列顺序 **order:num**。num越小排越前面。 4.**flex-grow**:是否填充剩余的空间 **flex-grow:num**。是否填充剩余的空间,默认是0,不填充,为1的话等大小填充。 5.**flex-shrink**:是否缩小剩余的空间 **flex-shrink:num**。是否缩小,默认是0,不缩小,为1的话等大小缩小。 6.**align-self**:采用单独的对齐方式。 同时推荐阮一峰的flex教程,很详细。 1.Flex 布局教程:语法篇([http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]) 2.Flex 布局教程:实例篇([http://www.ruanyifeng.com/blog/2015/07/flex-examples.html][http_www.ruanyifeng.com_blog_2015_07_flex-examples.html]) [http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [http_www.ruanyifeng.com_blog_2015_07_flex-examples.html]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.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 赞/ 212 阅读
相关 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 赞/ 322 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 393 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者! 上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 413 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待,/ 2021年06月24日 13:58/ 0 赞/ 494 阅读
相关 flex布局 Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 598 阅读
还没有评论,来说两句吧...