css 弹性盒子 flex

css 弹性盒子 flex

• 弹性盒子是什么
  弹性盒子是css3新出的一种当页面需要适应不同屏幕以及不同设备时确保元素有恰当显示的一种布局方式。

• 弹性容器与弹性子元素的理解
  当一个元素的 display 属性被设置为 flex 或 inline-flex 时，则该元素为弹性容器，其根子元素为弹性子元素。

---

那么好直接开整
这是我们传统的布局方式，外层有一个红色边框的div ， 内部有三个黑色边框的div

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

接着我们把 #box 设置为弹性盒子
那么现在细心的同学们已经发现，当我们 #box 设置为弹性盒子之后，里面的子元素的排序方式被改变了，
弹性盒子默认是以一行的形式显示，当我们里面的子元素总长度高于父级的长度时，那么弹性子元素会按比率缩小（例如图二）

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;  /* 这里与上面就加了一个  display: flex */
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!--
  <div>4</div>
  <div>5</div>
  -->
</div>

---

如果上面的东西整懂了，那么恭喜你已经会了一个最基本的弹性盒子，
接下来我们来解释一下 弹性容器的属性

1. flex-direction 可以改变子元素的排序方式

值	描述
row	默认，以一行从左到右显示
row-reverse	以一行显示从右到左
column	以竖状排序，从上到下
column-reverse	以竖状排序，从下到上

荔枝如图

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;
  /* 这里距离上面也就加了一个中国属性，
  把子元素的默认排序方法改为了 row-reverse 从右到左 */
  flex-direction: row-reverse;  
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

---

2. flex-wrap 可以改变换行规则

值	描述
nowrap	默认,只以一行显示，不换行
wrap	允许换行，当子元素的总长度高于父级长度时会换行
wrap-reverse	反转换行，也就是反转 wrap 显示，看下俩图就好理解了

荔枝
图一为 wrap 允许换行 ，
图二为 wrap-reverse 反转换行

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;
  /* 设置允许换行 */
  flex-wrap: wrap;
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

这里需要注意我的是没有更改排序方式(flex-direction)的 所以是以行状 换行，当是竖状的时候那么就是 俩列这样子的

---

3. justify-content 设置弹性子元素在弹性容器主轴上的对其方式

##########################################中场小插曲########################

那么好既然这里扯到了 主轴 ，那咱们就稍微说一下什么是主轴，什么是侧轴
主轴（main axis）和侧轴（cross axis），其中侧轴也可以翻译成交叉轴
主轴与侧轴 不像X/Y那样是固定的，主轴与侧轴的定义是通过 flex-direction（改变子元素的布局方式），
当 flex-direction 为 row 或 row-reverse 时（也就是横着排序时）那么主轴就是横着的，侧轴就是竖着的，
当 flex-direction 为 column 或 column-reverse 时（也就是竖着排序时）那么主轴就是竖着的，侧轴就是横着的，

##########################################################################

值	描述
flex-start	默认，主轴从起始到结束对齐
flex-end	主轴上从 结束到起始对齐
center	主轴上 居中对齐
space-between	把剩余长度平均分配到每个元素的间隔中， 比如父级元素为长度400px 里面有三个子元素长度为100px，那么一共有俩个间隔，也就是每个间隔为(400 - 100*3) /2 直接看图吧
space-around	把剩余空间平均分配到每个子元素的左右， 比如父级元素长度400px 里面有三个子元素长度为100px，那么三个元素左右一共就有6个，每个为 (400 - 1003)/(32) 直接看图吧

e… 稍稍微 画的有点丑

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;
  /* 设置主轴上的对其方式为 space-around */
  justify-content: space-around;
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

---

4. align-items 设置子元素在侧轴上的对其方式

值	描述
stretch	默认，从侧轴的开始拉伸到结束，这里需要注意拉伸的方向不能设置长度单位，不然拉伸不了
flex-start	靠近侧轴的起始边缘
flex-end	靠近侧轴的结束边缘
center	在侧轴上居中
baeLine	在侧轴上 按基线对齐

真的是蠢了，我为什么要画呢，直接多些几个 div 直接截图，它难道不香嘛

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;
  /* 设置侧轴上的对其方式为 center  */
  align-items:center;
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

---

5. align-content 设置 flex-wrap(换行规则) 的对其方式, 讲多了就是控制每行的对其方式（与align-item 类似）

值	描述
stretch	拉伸把剩余空间占满
flex-start	每行从起始排到结束
flex-end	每行从结束排到起始
center	居中
space-between	行在弹性盒容器中平均分布
space-around	各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  margin: 120px auto;
  display: flex;
  /* 设置行 为居中对其 */
  align-content:center
}
#box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

---

---

---

那么好弹性容器的元素我们已经了解得差不多了，
现在开始来了解弹性子元素的属性

1. order 子元素的排序顺序

值	描述
number	数越小越靠前，可以为负数，默认 0

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  display: flex;
  flex-wrap: wrap;
}

.box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div style="order: 1;">1</div>
  <div style="order: 6;">2</div>
  <div style="order: 2;">3</div>
  <div style="order: 5;">4</div>
  <div style="order: 3;">5</div>
  <div style="order: 4;">6</div>
</div>

---

2. align-self 设置弹性子元素在侧轴上的对齐方式

值	描述
auto	该弹性子元素跟随 弹性容器的 ailgn-items 的值， 如果弹性容器没有设置 align-items 那么该子元素为stretch
flex-start	该子元素靠近侧轴的起始位置
flex-end	该子元素靠近侧轴的结束位置
center	该子元素在侧轴的位置居中
baseline	该子元素以基线对其
stretch	该子元素从侧轴的起始位置拉伸到结束位置

我这里弹性容器 align-items 设置为 center

<style>
#box {
  width: 400px;
  height: 300px;
  box-shadow: 0 0 3px red;
  display: flex;
  align-items: center;
}

.box>div {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3px black;
}
</style>
<div id="box">
  <div style="align-self: auto;">1</div>
   <div style="align-self: flex-start">2</div>
   <div style="align-self: flex-end">3</div>
   <div style="align-self: center">4</div>
   <div style="align-self: baseline">5</div>
   <div style="align-self: stretch;height: auto;">6</div>
</div>

---

3. flex 设置弹性盒子分配空间

值	描述
number	份数

把弹性容器看为总长度
然后把 子元素的所有 flex 累加起来
使用总长度 / flex(总和) = 每份占百分之几
接着
flex：1 那么就是一份的长度
flex：2 那么就是俩份的长度
flex：3 那么就是三份的长度

---

---

结尾
那么好弹性盒子常用的元素咱们就先了解到这，