【CSS布局】Flex 布局

flex布局

1. 认识flex

• flexbox 是弹性盒子
  • 元素可以膨胀填充额外的空间和缩小适应更小的空间
  • 把flexbox来进行布局的方案成为flex布局
• 为什么使用flex布局？
  • 长久以来，css中唯一可以使用布局方案为float和position
  • 但这两种方案的局限性太强

2. flex布局的重要概念

• 两个重要概念
  • 开启了flex布局的元素称为：flex container
  • flex container 里面的直接子元素称为 flex item
• flex item具有以下特点
  • flex item 将收到flex container的属性来进行控制和布局
  • flex item 将不再严格区分块级元素和行内元素
  • flex item 默认情况的宽高是根据内容填充的，但是可以设置宽度和高度
• 如何成为flex container，将元素的display属性设置为
  • flex: flex container以 block-level的形式存在
  • Inline-flex: flex container 以 inline-level的形式存在
• Flex 布局的模型（核心概念）
  • 当一个元素设置为flex container时，默认拥有一个主轴和一个交叉轴，主轴的方向为从左到右
  • 交叉轴的方向为从上到下
  • 主轴的长度称为main size
  • 交叉轴的长度为cross

3. flex container属性

3.1 flex-direction

• 设置主轴的方向，主轴设置了，交叉轴也就设置成功了

• 属性

  • row(默认值)：主轴从左往右
  • row-reverse:主轴从右往左
  • cloumn : 主轴从上到下
  • column-reverse:主轴从下到上

• 举例

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.box {
  width: 500px;
  height: 600px;
  display: flex;
  background-color: pink;
  flex-wrap: wrap;
  /* 默认为从左到右，交叉轴从上到下 */
  flex-direction: row;
}
.box .item {
  width: 100px;
  height: 100px;
}

/* 从右往左 */
flex-direction: row-reverse;

/* 从上到下 */
flex-direction: column;

/* 从下到上 */
flex-direction: column-reverse;

3.2 flex-wrap

​ 决定了flex container是单行还是多行

• Nowrap(默认，单行)

• wrap

  

• Wrap-reverse：多行，但改变交叉轴的顺序

很明显，交叉轴从上到下变成了从下到上

3.3 flex-flow

​ flex flow是flex-direction和flex-wrap的简写，可以任意位置，并且都可以省略

flex-flow: row wrap;

3.4 justify-content

对flex items的对齐方式进行排布

3.5 align-items

决定了flex items在交叉轴的对齐方式，包括

• flex-start 与交叉轴的开始端方向对齐
• flex-end 与交叉轴的结束端方向对其
• center 居中对齐
• baseline 基线对齐（如果每个item中的font-size不一致）
• normal:效果和stretch一样
• strtch:当 flex items在交叉轴的方向为auto时，会自动填充
  

举例：当设置wrap时，第五个盒子设置的高度为auto，也就是交叉轴的方向（如果交叉轴方向为从左到右，实现效果需设置宽度为auto）

flex-flow: row wrap;
.item5 {
  width: 100px;
  background-color: green;
}

3.6 align-content

设置交叉轴上多行的展示效果，用法和justify-content类型

总结：flex contanier可以设置主轴的方向，主轴方向设置好，交叉轴的方向是默认的，但可以通过flex-wrap来进项翻转，可以设置是否换行，设置主轴和是否换行可以通过flex-flow来简写设置，顺序随意，都可以忽略，前两个属性设置的是总体的方向，可以通过justify-content对主轴方向的item进行布局，比如，space-start与主轴开始方向贴合，space-end与主轴结束方向贴合，space-between居中、从主轴开始方向贴合并且均匀分布在主轴中，每个间距相等，space-around也可以刚开始给一个间距，其他的均匀分布，整个主轴可以看成是一个手链，两端的间距加起来正好了item之间的间距相同，space-evenly也可以收尾间距都和item之间的间距相同，如果有多行的情况下，可以利用，align-content来进行设置交叉轴的排布

4. flex item属性

4.1 order 排序

​ 在标准流中，我们通过元素的前后顺序来给元素进行排序，在flex布局中，每个元素都有order属性，默认为0

​ 属性值更大的排在后面

4.2 flex-item

单独对某个item设置，可以覆盖container中的align-items的设置

• auto :默认值，默认遵从flex container中的align-items的配置
• stretch、flex-start、flex-end、center、baseline

相当于对某个元素的单独配置，如下图

4.3 flex-grow

• flex-grow决定了 flex items如何扩展(拉升或者拉长)
  • 设置任意非负数字(正数和0)，默认为0，表示不拉升
  • 当flex container在主轴方向布局后还有其他空间，flex-grow才会生效
• 如果flex items中flex加起来小于=1,则主轴上剩余的大小按照百分比来分配给item,=size & flex-grow
• 如果flex items中flex-grow加起来总和为sum，并且大于1，则分配的空间=size * flex-grow / sum
• flex items扩展后的最终size不能超过max-width或者max-height（取决于主轴的方向）

4.4 flex-shrink

• flex-shrink决定了flex items如何缩小
  • 可以设置正数和0，默认为1，在不换行的情况下，平均收缩
  • 当flex items 的总长度超过了flex container在主轴的长度时，才会生效flex-shrink
• 如果所有的flex items 的 flex-shrink的总和小于1，每个flex收缩的大小为
  • =超出的size * flex-shrink
• 如果所有的flexitems的flex-shrink的总和大于1，总和我sum，则每个flex收缩的大小为
  • =超出的size * flex-shrink/sum

4.5 flex-basis（不太明白）

• flex-basis用来设置flex items在主轴方向的基础尺寸
  • auto 默认值
  • 具体的数值（100px)
• 决定flex items的最终base size因素，从优先级高到低
  • max-width/max-height/min-width/min-height
  • flex-basis
  • width/height
  • 内容本身大小

4.6 flex属性

• flex属性是flex-grow、flex-shrink、flex-basis的简写，可以写一个值、2个或者是3个
• 写一个值时
  • 如果是一个无单位的值，比如1、2等，将被认为是flex-grow的值
  • 如果是一个有效的单位值，比如100px，会认为是flex-basis的值
  • none=flex:0 0 auto
  • auto=flex:1 1 auto
  • initial = flex: 0 1 auto
• 双值语法
  • 第一个值必须为无单位的数字，被当做flex-grow
  • 第二个值有单位，被当做flex-basis
  • 第二个值无单位，被当做flex-shrink

5. flex布局中遇到的问题