Flex布局 待我称王封你为后i 2021-11-05 15:44 496阅读 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 赞/ 190 阅读
相关 Flex布局 Flex布局详解 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中 短命女/ 2022年06月02日 07:54/ 0 赞/ 56 阅读
相关 flex布局 转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布 港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 354 阅读
相关 flex布局 转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 冷不防/ 2022年03月08日 19:20/ 0 赞/ 259 阅读
相关 Flex布局 首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性： <table> <tbody> <tr> 谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 292 阅读
相关 flex布局 \-flex-direction：设置主轴的方向 row (默认值)从左到右 row-reverse 从右到左 column 从上到下 谁借莪１个温暖的怀抱￠/ 2022年02月22日 03:23/ 0 赞/ 105 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 497 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！ 上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 517 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待，/ 2021年06月24日 13:58/ 0 赞/ 587 阅读
相关 flex布局 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便，现在越来越多的浏览器已经支持flex布局，最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 684 阅读
超、凢脫俗
短命女
港控/mmm°
小灰灰
还没有评论，来说两句吧...