flex vue 垂直居中居上_移动开发-flex 布局

好好学习，天天向上
主要内容为：原理理解，抽风式更新

flex 布局
1、了解 felx 布局原理传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端更好的布局

flex 布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC 端浏览器支持情况较差
• IE 11 或更低版本，不支持或仅支持部分支持

flex 布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear和 vertical-align属性将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
• 采用 felx 布局的元素，称为 flex 容器，简称容器，它的所有子元素自动称为容器成员，称为 flex 项目，简称项目

2、flex 布局父项常见属性
以下由6个属性是对父元素设置的

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式 (多行)
• align-items：设置侧轴上的子元素的排列方式 (单行)
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

align-content 和 align-items

• align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
• align-content 使用于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
• 总结就是单行找 align-itens 多行找 align-content

①、flex-direction：设置主轴的方向
主轴与侧轴

• 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、