破壳而出的蝌蚪

摘要： 采用 flexbox 弹性容器进行布局，只做练习用。 浏览器打开时切换到手机模式。 样本地址： http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/flex%E7%BB%83%E4%B9%A0-%E 阅读全文

摘要： 0、最终成品 1、头部布局实现 1：设置module-header为弹性容器，可采用两端对齐或把m-left设置为主轴起点边缘对齐、把m-right设置为主轴终点边缘对齐 2：左、右两边可能存在多项，那么在把它们两块设置为弹性容器 3：考虑到弹性项目大小可能不一样，可设置为垂直居中。 2、多行双排并 阅读全文

摘要： Flexbox页面布局实例，成本效果图如下， 源码下载在最下面。 源码下载：https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w 提取码：wiyc样本地址：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF% 阅读全文

摘要： 弹性容器单行：主轴居中，交叉轴居中。 弹性容器单行；主轴两端对齐；交叉轴一个为起点边缘；一个为终点边缘； 单选；主轴两端对齐；交叉轴一个为起点边缘；一个为居中对齐；一个为终点边缘； 1：弹性窗口设置为多行，交叉轴为两端对齐 2：每行基础大小设置为100%，然后每个子行主轴为两端对齐 在4的基础上增加 阅读全文

摘要： align-content 和 align-items ： 1：共同点：它们对齐方向为交叉轴 2：不同点：align-content 应用于为 多行 而 align-items:应用于单行。 单行对齐例子： 多行对齐例子 阅读全文

摘要： 基本思路 圣杯布局分为3段：上、中、下。 中段被分为：左、中、右3块。 1：采用flex布局时，先把弹性容器主轴设置为垂直方向（flex-direction:column） 2：上、中、下3块弹性项目设置均匀拉伸（flex:1）或固定上、下两端大小，让中间自动拉伸。注意：flex:拉伸是方向为主轴方 阅读全文

摘要： 1：创建一个弹性容器(display:flex) 2：构建2个或3个弹性项目. 3：把弹性项目设置为居中对齐.(align-items:center) 4：改变input自身对齐方式，把它设置为拉伸以适应容器（align-self:stretch）。 实例： 阅读全文

摘要： flex：auto 将增长值与收缩值设置为1，基本大小为 auto 。 flex：none. 将增长值与收缩值设置为0，基本大小为 auto 。也就是固定大小。 增长： 基本大小 + 额外空间 *（增长系数 / 增长系数总和） 按比例划分额外空间，然后各自分配。 缩小： 基本大小 – 溢出大小 *（ 阅读全文

摘要： flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。 主轴 justify-content justify-content对齐方式共有5种对齐方式： flex-start ：主轴起点边缘开始，从左向右。 flex-end ：主轴终点边缘开始，从右向 阅读全文

摘要： flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式。flex-direction共有4种模式：从左向右、从右向左、从上往下、从下往上。 主轴 主轴的起点与终点定义了容器元素的开始和结束边缘。 交叉轴 交叉轴的起点与终点定义了容器的顶部与底部。 从左向右：flex- 阅读全文