flex弹性盒模型

flex布局体验

传统布局与flex布局

传统布局

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

flex弹性布局优势

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

建议：

• 如果是PC端页面布局，还是用传统布局
• 如果是移动端或者不考虑兼容性问题的PC端页面布局，还是用flex弹性布局

display:flex;
justify-content;space-around;
flex:1 /* 等分布局  */

flex布局原理

flex即flexible box的缩写，意为”弹性布局“，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

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

原理

采用flex布局的元素，称为flex容器（flex container），简称”容器“，它的所有子元素自动成为容器成员，称为flex项目（flex item），简称项目

• 子元素默认是横向排列，也可以竖着布局

总结

flex布局就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

弹性盒的特点

• 在默认情况下，父元素添加display:flex，子元素横着排列
• 在默认情况下，在主轴上，即使子元素宽度（或者高度）之和超过父元素的宽，不会超出或者掉下去，而是自己去压缩自己的宽（或者高），去适用父元素

flex布局常见父项属性

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

1. flex-direction 设置主轴方向

主轴与侧轴

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

• 默认主轴方向是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下
• 在默认情况下，元素是不换行的，如果需要换行就添加flex-wrap

属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴排列的

主轴和侧轴并不是完全和x轴和y轴一一对应的，这取决于flex-direction把谁设置成主轴

值	描述
row	默认值，默认从左到右排列（即x轴、行）
row-reverse	翻转（子元素顺序也翻转改变）默认排列顺序，从右到左
column	从上到下排列（即y轴、列）
column-reverse	翻转（子元素顺序也翻转改变），从下到上
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

2. justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式

注意：在使用这个属性之前一定要确定好主轴是哪个

属性值

值	描述
flex-start	默认值 从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列（子元素顺序不变）
center	在主轴居中对齐（如果主轴是x轴，则水平居中）
space-between	先两边贴边，中间再平分剩余空间,，两端对齐，两端无边距（小米官网）
space-around	平分剩余留白空间，两端是有间距的

3. flex-wrap 设置子元素是否换行

属性值

在默认情况下，所有项目，也就是所有的子元素都排列在一条线上（又称“轴线”），默认子元素不换行，即使给父元素盒子了宽高，子元素有宽高，所有子元素不会撑爆父盒子，而且，子元素会硬塞一行，自动缩小子元素的宽度

值	描述
nowrap	默认值 不换行
wrap	换行
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

4. align-items 设置侧轴上的子元素排列（单行）

属性值

注意：侧轴是相对于主轴来说

align-items 是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项时使用

值	描述
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	元素位于容器的中心
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5. align-content设置侧轴上的子元素的排列方式（多行）

属性值

设置子项在侧轴上的排列方式，并且只能适用于子项出现换行的情况（多行），在单行下是没有效果的，想用此属性，必须要有换行

注意：align-content在侧轴上执行样式的时候，会把默认的间距给合并

值	描述
stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	在侧轴中间显示
flex-start	在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
space-between	子项在侧轴 先分布在两头贴边，再平分剩余空间
space-around	在项在侧轴上平分剩余留白空间

align-content和align-items的区别

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

flex-flow:row wrap;

属性值

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit默认值是 "row"。规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit默认值是 "nowrap"。规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。请参阅 initial。

flex布局常见子项属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

1. flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为：0 1 auto;

flex属性可以指定为1个值、2个值或3个值

• 单值语法

  • 当flex后的值为一个无单位数（例如没有px单位），会被当做flex-grow的值
  • 当flex后的值为一个带单位的有效宽度值，会被当做flex-basis的值
  • 关键字none，auto或initial

• 双值语法：第一个值必须为一个无单位数，并且它会被当做flex-group的值，第二个值必须为以下之一

  • 一个无单位数，会被当做flex-shirnk的值
  • 一个有效的宽度值，会被当做flex-basis的值

三值语法：

• 第一个值必须为无单位数，代表flex-grow
• 第二个值必须为无单位数，代表flex-shirnk
• 第三个值必须为一个有效的宽度值，并且它会被当做flex-basis的值

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

如果子元素没有宽度，则按份数均分父元素的宽度

.item{
    flex:<number>; /* default 0 */
}

/**  左侧固定、右侧固定，中间要想自适应 设置flex:1，自动分配中间空间  **/

2. align-self控制子项在自己侧轴上的排列方式

align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

注意：align-self是加载子元素身上，自己控制自己

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

属性值

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

3. order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0

div span:nth-child(2){
    order:-1;
    /** -1比0小，在排在前面 */
}

注意：和z-index不一样，z-index是控制样式叠罗汉的效果，而order是定义在行列上的排列顺序

4. flex-grow定义元素的放大比例

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。

默认为0，即如果存在剩余空间，也不放大

不能设置为负数

• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
• 如果单个元素flex-grow的属性为1，则自适应撑开
• 如果是小数，则每个子元素再多分的空间为=剩余空间x小数
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

注意：flex items扩展后的最终size不能超过max-width\max-height

5. flex-shirnk 定义元素的缩小比例

默认是每个子元素同时收缩，等分铺满

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
initial	设置该属性为它的默认值。请参阅 initial。

• 如果所有项目的不设置flex-shirk，或者flex-shirk属性都为1（默认也为1），则子元素同时收缩，并且等分铺满
• flex-shirnk为0，则展示原本的宽度
• 如果是小数，则每个子元素再收缩的空间为=剩余空间x小数

注意：flex items收缩后的最终size不能超过min-width\min-height

6. flex-basis设置主轴上面元素的大小

当设置为auto的时候，元素本身宽度多少就是多少

属性值

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。

优先级

决定flex items 最终base size的因素，从优先级高到低的排序为

• max-width\max-height\min-width\min-height
• flex-basis
• width\height
• 内容本身的size

定位元素与弹性布局

• 当子绝父相的时候，与弹性布局矛盾，脱离文档流和空间位
• 当子相父相的时候，相对于自己的原位置偏移，但是在弹性布局中的空间位不丢失