flex 布局了解

要持续更新呀 学无止境…

---

一、了解 felx 布局原理

• 传统布局
  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端更好的布局
• flex 布局
  • 操作方便，布局极为简单，移动端应用很广泛
  • PC 端浏览器支持情况较差
  • IE 11 或更低版本，不支持或仅支持部分支持

flex 布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear和 vertical-align属性将失效

• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局

• 采用 felx 布局的元素，称为 flex 容器，简称容器，它的所有子元素自动称为容器成员，称为 flex 项目，简称项目

---

二、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

1、flex-direction：设置主轴的方向

主轴与侧轴

• 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
• 默认主轴方向就是 x 轴方向，水平向右
• 默认侧轴方向就是 y 轴方向，垂直向下
  
• flex-direction 属性决定主轴的方向（即项目的排列方向）
• 注意：主轴和侧轴是会变化的，就看 flex-direction 设置为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

属性值	解释说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-revese	从上到下

div {
   
    display: flex;
     width: 400px;
     height: 400px;
     background-color: blanchedalmond;
     /* 默认主轴是水平从左往右 */
     /* flex-direction: row; */
     /* 主轴 水平从右往左 */