超详细的Flex布局讲解

flex布局介绍

flex布局是目前web开发中使用最多的布局方案：

• flex 布局（Flexible布局，弹性布局）
• 目前特别在移动端用的最多，目前pc端使用的也越来越多
• 现在很多浏览器都支持flex布局

两个重要的概念：

• 开启了flex布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex items

开启flex布局的方法

• 设置display 属性为flex（表现为块级元素，可指定宽高并且独占一行） 或者 inline-flex（行内块元素，可指定宽高，但是不会独占一行）

flex布局的兼容性

flex布局模型

注意：默认情况下felx items 仅在一行中显示，若是设置flex-wrap设置为多行，那么，当flex items 到达main end，就会换行（可能图片没有备注好）

注意：默认从左往右的水平轴为主轴，垂直轴为交叉轴，且flex items 的排列方式为从左往右，从上往下，但是不是固定的，可以改变。

flex相关的属性

应用在 flex container 上的 css 属性

• flex-flow
• flex-direction
• flex-wrap
• justify-content
• align-content

Flex-direction属性

flex items 默认都是沿着主轴（main axis）从main start 开始往main end方向排布
flex-direction 属性是用来决定主轴的方向的，有四个值：

• row ： 主轴方向从左到右（与默认方向相同）
• row-reverve ：主轴方向由右向左
• column：主轴方向由上至下，相当于将垂直轴指定为主轴
• column-reverse ：主轴方向由下至上，相当于将垂直轴指定为主轴
  

Justify-content 属性

justify-content 决定了flex items 在main axis 上的对齐方式
取值如下：

• flex-start （默认值）：与main start 对齐
• flex-end ： 与 main end 对齐
• center ： 居中对齐
• space-between ：
  与 flex items 之间的距离相等，与main start 、main end 两端对齐（距离为0）
• space-evenly ：
  与 flex items 之间的距离相等，flex item 与main start 、main end 之间的距离等于flex items之间的距离
• space-around ：
  flex items 之间的距离相等，flex items 与 main start、main end 之间的距离的一半

align-items 属性

align-items 决定了 flex items 在交叉轴（cross axis）上的对齐方式。
取值如下：

• normal ：在弹性布局中，效果和 strech 一样
• strech ：当flex items 在交叉轴（cross axis）方向的height 为 auto 时（非flex布局中若为 auto 那么高度由内容决定），会自动拉伸填充至flex container（item 的 height 拉伸到与container高度相同），若指定了，与指定高度一致，且顶部对齐
• flex-start ：与corss start 对齐
• flex-end ：与cross end 对齐
• center： 居中对齐
• baseline ：与基准线对齐（即item 内部文字的基线对齐）
  
  
  
  
  注意：baseline对齐时，若 flex item 中有多行文本时，均以第一行的文字的基准线对齐。

flex-wrap 属性

默认情况下，所有的flex items 都会在同一行显示，若是显示不下，那么便会对 flex items 进行压缩。
flex-wrap 决定了 flex container 是单行还是多行
取值如下：

• nowrap（默认）：单行
• wrap：多行，排列方式为从上往下
• wrap-reverse：多行（对比wrap，cross start 与 cross end 相反），排列方式为从下往上排列
  
  

flex-flow 属性

flex-flow 是 flex-direction || flex-wrap 的缩写属性，可以省略，顺序随意。

align-content 属性

align-content 决定了多行 flex items 在cross axis 的对齐方式（即控制垂直方向上的flex items之间的距离），用法与justify-content类似。默认是多行的 flex items 等分
取值如下：

• strech（默认值）：与algin-items 的 strech 类似。
• flex-start ：与cross start 对齐
• flex-end ：与cross end 对齐
• center ：居中对齐
• space-between ：flex items之间的距离相等（将flex container 的height 平分），与cross start、cross end两端对齐
• space-around：flex-items之间的距离相等，flex items 与cross start、cross end之间的距离是flex items 之间的距离的一半
• space-evenly ：flex items 之间的距离相等，flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离。
  
  
  
  
  
  
  

应用在 flex items上的 css 属性

• flex
• flex-grow
• flex-basis
• flex-shrink
• order
• algin-self

order 属性

order 决定了flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就排在越前面
• 默认值为零，若都为零按照添加的顺序排列

algin-self 属性

flex items 可以通过 algin-self 覆盖 flex container 设置的 align-items。

• auto（默认值）：遵从 flex container 的 algin-items 设置
• stretch、flex-start、flex-end、center、baseline，效果跟algin-items 一致。

flex-grow 属性

默认情况下不会生长
flex-grow 决定了 flex items 如何扩展
可以设置任意非负数（正小数、正整数、0），默认值是0
当flex container 在 main axis 方向上有剩余size 时，flex item扩展的 size 为：

• 当所有 flex items 的flex-grow 总和 sum 超过1，每个flex item 扩展的 size 为：
  flex container 的剩余 size * flex-grow / sum
• 当所有的 flex items 的 flex-grow 总和不超过1，每个flex item扩展的size 为：
  flex container 的剩余 size * flex-grow
• flex items 扩展后的最终 size 不能超过 max-width \ max-height

flex-shrink 属性

默认情况下会伸缩
flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数（正小数、正整数、0），默认值是1
当flex container 在 main axis 方向上超过了flex container 的 size时 ，flex-shrink 属性才会生效，每个 flex item 收缩的 size 为：

• 当所有 flex items 的 flex-shrink 总和 sum 超过1，每个flex item 收缩的 size 为：
  超出flex container 的 size * flex-shrink / sum

• 当所有的 flex items 的 flex-shrink 总和不超过1，每个flex item收缩的size 为：
  flex items 超出的size * sum * flex-shrink

• flex items 收缩后的最终 size 不能小于 min-width \ min-height

flex-basis 属性

flex-basis 用来设置flex items 在main axis 方向上的 base size
取值为：auto（默认值）、具体的宽度数值（如100px）
决定flex items 最终base aize的因素，从优先级高到低

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

flex属性

flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个、2个或3个值。
单值语法：值必须为以下其中之一：

• 一个无单位数（< number >）：它会被当作< flex-grow >的值
• 一个有效的宽度（width）：它会被当作< flex-basis >的值
• 关键字none，auto，initial

双值语法：第一个值必须为无单位数，并且它会被当作< flex-grow >的值。

• 第二个值必须为以下之一：
  √ 一个无单位数：它会被当成< flex-shrink>的值
  √ 一个有效的宽度（width）：它会被当作< flex-basis >的值

三值语法：

• 第一个值必须为无单位数，并且它会被当作< flex-grow >的值
• 一个无单位数：它会被当成< flex-shrink>的值
• 一个有效的宽度（width）：它会被当作< flex-basis >的值