#

flex 布局简介

• flex 布局是一种用于按行或者列布局元素的一维布局方法
• 元素可以膨胀以填充额外布局空间，收缩以适应更小空间
• flex 布局是目前 web 开发中使用最多的布局方案

flex 布局中的重要概念

重要概念

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

当 flex container 中的子元素变成了 flex item 时，具备以下特点

• flex item 的布局将受 flex container 属性的设置进行控制和布局
• flex item 不再严格区分块级元素和行内级元素
• flex item 默认情况下不是包裹内容的，但是可以设置宽度和高度

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• flex: flex container 以 block-level 形式存在
• inline-flex: flex container 以 inline-level 形式存在

flex 布局模型

flex 相关的属性

flex container 上的 CSS 属性

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

flex items 上的 CSS 属性

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

flex 容器上的属性

flex-direction

flex items 默认是按照主轴方向从开始向末尾方向排布
flex-direction 决定了主轴的方向

row 默认值，主轴从左向右

row-reverse 从右向左

column 从上向下

column-reverse 从下向上

flex-wrap

flex-wrap 决定了 flex 容器中是单行排布还是多行排布

nowrap 默认值，单行排布，即使剩余空间不足，所有元素会挤在一起

wrap 多行排布，单行排布剩余空间不够自动换行

wrap-reverse 多行排布，侧轴方向和 wrap 相反

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写，顺序不是固定的，并且都可以省略
格式： flex-flow: flex-direction || flex-wrap

justify-content

justify-content 属性决定了 flex items 在主轴上的对齐方式

flex-start (默认值)， 与主轴开始位置对齐

flex-end 与主轴结束位置对齐

center 居中对齐

space-between 主轴方向两端对齐， 子元素之间距离相等

space-around 在主轴方向上对齐，两端不会紧贴着主轴的两端，并且两端元素距离主轴两端的距离是子元素之间距离的一半

space-evenly 子元素之间距离相等， 主轴方向两端子元素距离主轴两端的距离和子元素之间的距离一致

align-items

align-items 属性决定了 flex items 在侧轴上的对齐方式

normal 弹性布局中效果和 stretch 一致,如果子元素侧轴方向上的 size 为 auto, 会自动拉伸子元素的 size 填充满 flex container

stretch 如果子元素侧轴方向上的 size 为 auto, 会自动拉伸子元素的 size 填充满 flex container，效果图如上

flex-start 和侧轴方向的起始位置对齐

flex-end 与侧轴方向的末端对齐

center 侧轴方向居中对齐

baseline 与基线对齐

总结图

align-content

align-content 决定了多行 flex 子元素在侧轴方向上的对齐方式，用法与 justify-content 类似

• stretch 默认值，与 align-items 的 stretch 类似
• flex-start 与侧轴方向的开始位置对齐
• flex-end 与侧轴方向的末尾对齐
• center 居中对齐
• space-between flex 子元素之间的距离相等，侧轴的开始位置和末尾位置两端对齐
• space-around flex 子元素之间距离相等，flex 子元素与侧轴的开始位置和结束位置距离是 flex 子元素之间距离的一半
• space-evenly flex 子元素之间距离相等， flex 子元素与侧轴的开始位置，末尾位置之，flex 子元素之间的距离相等

flex items(flex 子元素)属性

order

order 属性决定了 flex 子元素的排布顺序

• 可以设置任意整数(正整数，负整数，0)，值越小排布的位置越靠前
• 默认值是 0

align-self

flex items 可以通过 align-self 覆盖 flex 容器设置的 align-items

• auto 默认值，遵循 flex 容器的 align-items 属性值
• stretch，flex-start，flex-end，centrer，baseline 效果和 align-items 一致

flex-grow

flex-grow 决定了 flex 子元素如何扩展(拉伸)

• 可以设置任意非负数字(正小数，正整数，0)，默认值是 0
• 当 flex 容器在主轴方向上有剩余空间时， flex-grow 属性才会有效
• 如果所有 flex 子元素的 flex-grow 总和(sum)超过 1，每个 flex 子元素扩展的 size 是
  • flex 容器剩余 size*flex-grow/sum
• flex 子元素扩展后的最终 size 不能超过 max-width/max-height

flex-shrink

flex-shrink 属性决定了 flex 子元素如果收缩(缩小)，
可以设置任意非负数字(正小数，正整数，0)默认值是 1
当 flex 子元素在主轴方向上超过了 flex 容器的 size，flex-shrink 属性才会有效
如果所有 flex 子元素的 flex shrink 总和超过 1， 每个 flex 子元素收缩的 size 为
flex 子元素超出 flex 容器的 size * 收缩比例/所有 flex 子元素的收缩比例之和
flex 子元素收缩后的最终 size 不能小于 min-width/min-height

flex-basis

flex-basis 用来设置 flex items 在主轴方向上的 base size
取值

• auto(默认值)
• 具体的宽度数值(例如 100px)

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

• 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 个值

设置一个值，值必须是以下其中一个属性的值

• 一个无单位的数字，会被当做 flex-grow属性的值
• 一个有效的宽度值，会被当做flex-basis属性的值
• 关键字none,auto或者nitial
• none 代表 flex: 0 0 auto;
• auto 代表 flex: 1 1 auto;

设置两个值，第一个值必须是一个无单位的数字，并且会被当做 flex-grow 属性的值，第二个值必须是以下的一个

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

设置三个值

• 第一个值必须是无单位的数字，当做flex-grow属性的值
• 第二个值必须是无单位的数字，当做flex-shrink属性的值
• 第三个值必须是一个有效的宽度值，当做flex-basis属性的值

问题解决

方案一

不使用justify-content，使用margin-right计算

<style>
  .container{
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    background-color: orange;
  }
  .box{
    width: 120px;
    height: 150px;
    background-color: aquamarine;
    margin-bottom: 10px;
    margin-right: 5px;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

方案二

在最后一行添加 n列 - 2 个 span 或者 i元素，并且宽度和flex子元素宽度一致

<style>
  .container{
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: orange;
  }
  .box{
    width: 120px;
    height: 150px;
    background-color: aquamarine;
    margin-bottom: 10px;
  }
  .container>i{
    width: 120px;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <i></i><i></i>
</div>