Css3 弹性盒子(Flex box)

前言

弹性盒子，顾名思义：它是具有弹性功能的，在Web网页中，你所看见的内容，不会随着网页宽度的变化而打乱了排版。今天以一种非常白话的方式和大家谈一谈我对Flex box 的认识。

Flex box 中属性作用的对象

• 父级元素
• 直接的子元素
  这里我强调了，是直接的子元素,假设我们html代码如下
  <nav>
  <ul class="wrap-items">
  <li class="first"><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">About</a></li>
  </ul>
  </nav>
  Css代码为:
  .wrap-items{
  width: 100%;
  height: 200px;
  background-color: lightgray;
  display: flex;
  }
  .wrap-items>li{
  width: 100px;
  height:80px;
  background-color: #888;
  text-align: center;
  line-height: 80px;
  }

1. ul和li为直接的父子关系，属性display:flex写在ul中,可以work
2. nav和li是祖辈之间的关系 ,属性写在nav中这里就不会work

生效效果图:

Paste_Image.png

---

Flex 有哪些属性？

• display
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• order
• align-self
• flex

介绍了Flex box作用对象，和它的属性，接着我们就按作用对象给属性给分类

属性分类

写在父元素上上的：

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

剩下的就是写在子元素上的咯：

• order
• align-self
• flex

---

我对这些属性的理解是什么呢？

• display ： flex 指定我要用弹性盒子的属性.默认就是水平排序了
• flex-direction ： 指定排列的方向，默认水平
• flex-wrap ： 超过自身宽度，是否换行，默认换行
• justify-content ： 水平方向上对齐
• align-items ： 垂直方向上对齐
• align-content ： 针对- flex-warp 属性发生换行，具有的排列方式
• order ： 改变某个元素的相对位置或者说顺序
• align-self ： 针对某个元素定义垂直对其方式
• flex ：针对某个元素按比例定义自身大小

每个属性的身上又有哪些值呢？

• display ： flex ；说弹性盒子，这个值肯定是唯一的

行还是列

• flex-direction ：row | column | row-reverse | ；其实在我理解也就是按行排或者按列排

flex-direction：row；默认就是按行排（所以可以不写）

Paste_Image.png

flex-direction：column

Paste_Image.png

换行吗？

• flex-wrap ：nowrap | wrap ； 换行或者不换行咯（超过自身width）

flex-wrap：wrap；父级元素小于子元素的宽度之和，就会发生换行，否则不换行

Paste_Image.png

flex-wrap：nowrap；因为自身宽度不够，又因为弹性的作用，让他们挤在一起

Paste_Image.png

水平对齐方式

• justify-content ： flex-start | flex-end | center | space-between | space around ；左对齐，右对齐，中心对其，等分对其，....

justify-content：flex-end；默认的 flex-start 就不截图了.

Paste_Image.png

justify-content：center ;

Paste_Image.png

justify-content：space-betwen ;

Paste_Image.png

justify-content：space-around;左右间距加起来等于中间的某个间距

Paste_Image.png

垂直对齐方式

• align-items ：flex-start | flex-end | center | baseline | stretch
  - align-items ：flex-end；默认的flex-start ，不截图了

Paste_Image.png

align-items：center;

Paste_Image.png

flex-wrap 发生换行，我就可以发生效果了（垂直方向上的效果）

• align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content：flex-start;

Paste_Image.png

align-content：flex-end;

Paste_Image.png

align-content：center;

Paste_Image.png

align-content：space-between;

Paste_Image.png

align-content：space-around;

Paste_Image.png

---

在我身体里，我想控制谁就控制谁

• align-self：flex-start | flex-end | center | baseline | stretch
  这里对4个子元素，分别应用了不同的属性值
  Paste_Image.png

我的大小你做主

flex:按比例写 (1:1:1:1)比例值，分别写进对应的元素中.
这里 的比例为1：2：1：2 .从分配的宽度就可以看出

Paste_Image.png

---

flex:具体值，没什么意义，可以直接定义宽度

---

flex:具体值+比例值
Home :分配了200px;
其余的比例都是1；

Paste_Image.png

---

tips ：

• 可以嵌套写 display：flex；
• 可以结合定位使用哦，但position不要和flex 放在同一个元素里哦

扯了这么多，竟然有点饿了，我先撤退了咯。bye，bye！
希望大家能够监督我，提醒或者鼓励我能够养成坚持写文章的习惯。
如有错误或者疑问，请及时私聊我哦！