弹性盒模型flex

弹性盒，伸缩盒模型 ：flex

传统布局

• 基于盒模型，依赖display+ float +position进行页面布局

• 这种布局兼容性好，但是布局比较繁琐。

不便：

• div同行显示设置float或是设置display：inline-block
• 清除浮动,高度塌陷
• 各种居中对齐
• margin重叠

css3 提供了一套自适应布局模式——弹性布局，它替代或辅助传统布局。

基本概念

• 弹性盒模型是一种当页面需要适应不同 的屏幕大小以及设备类型时确保元素拥有恰当行为的一种布局方式。
• 提供了一种更加有效的方式来控制一个容器里面的子元素进行排列、对齐、分配空白空间。对移动端友好。

弹性盒模型结构

弹性盒模型是由弹性容器和弹性项目构成。

• 弹性容器：包含弹性项目的父元素
  • 特点：
    • 弹性容器里面的弹性项目同行显示，默认排列不下时，压缩显示
    • 弹性容器只对自己的子元素有效
    • 弹性容器对自己的兄弟元素没有影响
    • 对于弹性容器来说，高度可以自适应，无需设置高度
• 弹性项目：弹性容器里面的每个子元素都是弹性项目。

• 主轴：弹性项目一行显示的轴是主轴
• 侧轴：与主轴垂直方向上是侧轴

弹性盒

弹性容器(父元素)

• 要使用弹性盒必须将一个元素设置为弹性容器

• 通过display来设置弹性容器

  • display：flex;设置块级弹性容器，会将盒子变为块级的弹性容器，对其他的兄弟标签来说，就是一个普通的块级标签，对其子元素来说，该盒子是他们弹性容器。
  • display：inline-flex; 行内弹性容器，会将盒子变为行内块级的弹性容器，对其他的兄弟标签来说，就是一个普通的行内块级标签，对其子元素来说，该盒子是他们弹性容器。

弹性元素

• 弹性容器的子元素是弹性元素(弹性项)

一个元素可以同时是弹性容器和弹性元素

弹性容器的样式

flex-direction

• 指定弹性容器中弹性元素的排列方式
• 可选值：
  • row 默认值：弹性元素在容器中水平排列（左——>右）
  • row-reverse 反向水平排列（右——>左）
  • column 弹性元素纵向排列（自上而下）
  • column-reverse 反向纵向排列（自下而上）

flex-wrap

• 设置弹性元素是否在弹性容器中换行
  • 可选值：
    • nowrap默认值元素不自动换行
    • wrap 元素沿辅轴方向自动换行
    • wrap-reverse 元素沿辅轴反方向换行

flex-flow

• wrap和direction简写属性，无顺序要求

justify-content

• 分配主轴上的空白空间（主轴上的元素如何排列）

• 可选值：

  • flex-start 元素沿主轴起边排列，空白分布在弹性项的后边
  • flex-end 元素沿主轴终边排列，空白分布在弹性项的前边
  • center所有元素在主轴水平居中
  • space-around 空白分布到元素两侧,首尾是中间的一半
  • space-evenly 任何两个item之间的间距(以及边缘的空间)是相等的（兼容性差）
  • space-between 空白均匀分布到元素间

align-items针对于 单行flex-item

• 元素在辅轴上如何对齐

• 可选值：

  • stretch 默认值 将元素长度设置为相同值（同一行）注意：弹性项目没有高度，将弹性项目拉伸，占满弹性容器富裕空间
  • flex-start 元素不会拉伸，沿辅轴起边对齐
  • flex-end 元素不会拉伸，沿辅轴终边对齐
  • center 元素不会拉伸，沿辅轴居中对齐
  • baseline 沿基线对齐

align-content针对于多行的flex-item

• align-content 辅轴空白空间的分布与justify-content用法相同

弹性元素样式

对单个弹性元素进行设置

• align-self用来覆盖当前弹性元素上的align-item 用法与align-item相同

flex-basis

• 元素的基础长度，指的是元素在主轴上的基础长度

• 主轴是横向 指元素的宽度

• 主轴是纵向，指元素的高度

• 默认值：auto 表示参考元素自身的高度和宽度

  • 若传递了一个具体数值，则以该值为准

• 语法：

  flex-basis:宽度；
  

  注意：宽度优先级：flex-basis > width >由内容撑开

flex-grow

• 指定弹性元素的伸展系数，按比例分,设置弹性项目的弹性因子

• 原理：弹性容器会将多余的空间（富裕空间）按照设置的弹性因子分成等量的几份，分别让弹性项目进行消化，弹性因子大的弹性项目得到的多余的空间越多

• 语法：

  flex-grow:数字；
  

  • 默认值为 0

• 弹性空间的计算公式

  弹性项目的弹性空间 = 富裕空间 / 弹性因子总数 * 弹性因子
  弹性项目的大小= 弹性空间+弹性项目原来的大小

flex-shrink

• 指定弹性元素的收缩系数,当前容器宽度不够时,弹性项目的收缩因子

• 原理：当弹性容器的宽度容不下当前该行的弹性项目时，就会依赖felx-shrink来压缩弹性项目，达到不换行的目的。flex-shirink会将压缩空间分为等量的，通过减少弹性项目的尺寸

• 缩减多少是根据缩减系数和元素大小来计算的

• 语法

  flex-shrink:数字；
  

  • 默认值为1，设置为0时，相当于不压缩

• 压缩公式

  弹性项目压缩空间 = （弹性项目的总宽度 - 弹性容器的宽度）/ 压缩因子的总数 * 压缩因子
  弹性项目的大小 = 弹性项目压缩前的宽度 - 压缩空间

flex

• 可设置弹性元素的所有三个样式

• 语法: flex 增长（伸展） 缩减（收缩） 基础长度

  flex:flex-grow   flex-shrink   flex-basis;
  

• initial–(flex:0 1 auto) 默认值

• auto –(flex:1 1 auto)

• none –(flex:0 0 auto) 无弹性

order

• 决定弹性元素的排列顺序

• 数值越小越靠前 默认为 0,相同数学按照代码结构顺序显示

• 语法：

  order:数字；
  

• 应用场景

  • 鼠标点击拖拽某个元素排在最后

富裕空间

• 概念：在弹性容器中，除弹性项目之外的剩余的空间就是富裕空间，主要分为主轴的富裕空间和侧轴的 富裕空间

弹性空间

• 概念：弹性空间是指弹性项目消化的富裕空间，将富裕空间变成弹性项目的一部分