快乐编程-flex实践教程
文章平均质量分 82
该书对flex弹性布局进行了详细的介绍,包含了容器和项目,以及每个相关的属性的作用。其中知识点的讲解融合了大量的示例和实践中的例子,通俗易懂并且实用,
另外章节的顺序都经过详细的考虑,知识点更加连贯,阅读更加流畅。
晴空闲雲
专注计算机科学,阅读、思考、写作。
展开
-
flex弹性布局教程-13项目属性align-self
本篇介绍了项目属性 align-self,和 align-items 类似。align-items设置在容器上,作用所有的项目。align-self 设置在项目上,作用单个项目。阅读时间约5~10分钟。原创 2021-09-29 20:29:28 · 6590 阅读 · 0 评论 -
flex弹性布局教程-12容器属性align-content
本篇介绍了容器属性align-content的姿势,先介绍了知识点,后面和align-items进行了对比。阅读时间大约15~20分钟。原创 2021-09-27 21:24:39 · 1564 阅读 · 5 评论 -
flex弹性布局教程-11容器属性align-items
本篇介绍了容器属性align-items的知识点,用来设置项目在交叉轴方向上的对齐方式,最后又提了一个垂直水平方向居中的应用。阅读时间大约5~10分钟。原创 2021-09-26 20:28:11 · 2513 阅读 · 0 评论 -
flex弹性布局教程-10容器属性justify-content
本篇介绍了容器属性justify-content,用来设置项目在主轴方向上的对齐方式,对每个属性值都进行了演示。阅读时间大约5~10分钟。原创 2021-09-25 20:26:55 · 2635 阅读 · 0 评论 -
flex弹性布局教程-09-容器属性flex-flow
本篇介绍了容器属性 flex-flow,是flex-direction和flex-wrap的合集,前面有讲解过相关属性了。这边就来做个应用。阅读时间大约10~15分钟。原创 2021-09-24 20:45:02 · 2850 阅读 · 1 评论 -
flex弹性布局教程-08容器属性flex-wrap
本篇讲解了容器属性 flex-wrap,用于设置容器内项目是否自动换行,并对相应的值进行了演示。阅读时间大约5~10分钟。原创 2021-09-23 20:34:37 · 11999 阅读 · 0 评论 -
flex弹性布局教程-07容器属性flex-direction
本篇讲解了容器属性 flex-direction,用来设置主轴的方向。阅读时间大约10~15分钟。原创 2021-09-22 21:49:33 · 2881 阅读 · 2 评论 -
flex弹性布局教程-06项目属性flex和order
本篇介绍了 flex 属性和 order 属性,flex属性就是 flex-grow、flex-shrink、flex-basis 三个属性的合集。order 属性用来对项目进行排序阅读时间约10~15分钟。原创 2021-09-21 19:23:42 · 2940 阅读 · 2 评论 -
flex弹性布局教程-05项目属性flex-shrink
本篇介绍了 flex-shrink 属性,flow-grow 用于放大,那么 flex-shrink 就是缩小了,其缩小规则和 flex-grow 类似。阅读时间约10~15分钟,文字虽多,但主要都是例子。原创 2021-09-21 19:17:46 · 2295 阅读 · 4 评论 -
flex弹性布局教程-04项目属性flex-grow
本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器的剩余空间。阅读时间约10~15分钟,文字虽多,但主要都是例子。原创 2021-09-21 18:31:50 · 26113 阅读 · 6 评论 -
flex弹性布局教程-03-项目属性flex-basis
本篇介绍了 flex 项目属性的第一个 flex-basis ,用于设置占据主轴空间的大小。阅读时间10~15分钟。原创 2021-09-19 10:46:59 · 7739 阅读 · 2 评论 -
flex弹性布局教程-02-容器display设置为flex
本篇介绍了弹性布局的第一步,需要先将容器display设置为flex,并逐步对其中的流程进行了讲解。阅读时间10~15分钟。原创 2021-09-19 10:42:37 · 1219 阅读 · 0 评论 -
flex弹性布局教程-01-前言和基础概念
本篇介绍了学习flex弹性布局前需要的前置知识,介绍了布局的基本知识,flex弹性布局的基本的两个概念:容器和项目。阅读时间10~15分钟。原创 2021-09-19 10:37:55 · 672 阅读 · 4 评论