弹性盒子布局

弹性盒子

弹性盒子叫flex，如何才能创建一个弹性盒子
需要使用display: flex;

兼容性

如果我们的项目需要兼容到IE低版本，则不能使用flex

特点

flex可以直接替代浮动实现网页布局，同时比浮动更简单，更容易，但是，刚开始学习，会觉得属性比较多，难以掌握

内部规则

我们称添加了flex属性的元素为容器，容器内部的子元素叫项目

1. 容器有两个方向的轴，横轴和纵轴，默认横轴为主轴
2. 每个方向的轴都有开始和结束两个点，flex-start 和 flex-end
3. 横轴开始点在左，结束点在右
4. 纵轴开始点在上，结束点在下
5. 容器内部的项目永远都会沿主轴排列 从 flex-start 到 flex-end
6. 主轴可以切换，flex-start 和 flex-end 可以切换
7. 只要变成项目，我们就可以把他当成块元素对待

弹性盒子，就是通过改变容器中主副轴和方向，实现项目的不同排列方式

弹性盒子

生成弹性盒子

我们可以给对应元素添加对应属性，生成弹性盒子

选择器 {
  display: flex;
}

在最新版本的chrome中，看到下方这个东西，表示这个元素变成了flex

改变主轴方向

flex-direction

• row 默认值
• column

如果我们要把主轴切换为纵轴，则使用该属性进行修改

选择器 {
  dispaly: flex;
  flex-direction: column;
}

改变主轴start和end位置
flex-direction

• row-reverse
• column-reverse

一旦我们添加了reverse,则主轴上的start和end点就会切换方向，然后项目布局就会跟着改变

设置项目是否换行

默认情况，项目过多，最大宽度超出容器最大宽度，会自动被压缩，如果我们想要实现换行的效果，需要添加flex-wrap属性

• wrap
• nowrap 默认值
• wrap-reverse

选择器 {
  display: flex;
  flex-wrap: wrap;
}

复合属性 direction 和 wrap

flex-flow是 flex-direction 和 flex-wrap 的复合属性

选择器 {
  display: flex;
  flex-flow: direction的属性值 wrap的属性值；
}

项目在主轴上的排列方式

justify-content

• center 常用 居中
• flex-start 默认值
• flex-end end 排列
• space-between 左右贴边 ，中间等分
• space-around 所有元素左右两边有相同空间
• spance-evenly 所有元素间距相同

选择器 { 
 display: flex;  
 justify-content: center;
 }

项目在副轴上的排列方式

align-items

• center 居中
• flex-start 开始
• flex-end 结束
• stretch 拉伸默认值

项目属性

添加到容器子元素上的属性

align-self

可以覆盖添加在容器上的align-item 属性，使单个项目在副轴上有自己的排列方式，属性值和align-items 一致

• flex-start
• flex-end
• center
• stretch
  flex-grow

默认情况下，项目在主轴上所占的距离是根据 width 和 height 实现的，我们可以通过 flex-grow 实现 宽 或者 高 的自动放大

• 0默认情况
• 其他数字

并非数字越大，放大的比例越大，而是按比例进行计算：默认宽度 + 剩余空间 / 总的grow值 * 单个项目的grow值
一般情况下，我们使用该操做，只是为了把元素自动放大，所以最常用的属性为 flex-grow: 1
项目在一行上必须有剩余空间

flex-shrink

默认情况下，一行项目总的距离大于主轴上容器的距离，项目会被自动压缩。

• 1默认值
• 其他数字
  最常用的就是flex-shrink: 0;
  默认宽度 - 超出空间 / 总的shrink值 * 单个项目的shrink值
  项目在一行上如果超出容器大小，才会触发压缩操做

flex-basis

定义项目在主轴上所占的距离

• ？？px
• ??%
• auto 默认值 跟随width height 走

优先级要高于宽高

flex

flex是上面三个属性的复合属性
flex:o 1 auto

选择器 {
  flex: flex-grow flex-shrink flex-basis;
}

order

进行项目排序，默认值为0，值越大，越靠后，能有负值，值越小，越靠前

这个排序不会印象到布局，只会影响顺序

选择器 {
  order: 1;
}