前端面试题总结整理，css第六篇

1. flexbox-CSS3弹性盒模型flexbox布局通俗讲解。

• 为何叫弹性盒子，可以有效的分配一个容器的空间 ，即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 。

• 弹性盒（Flebox）模型旨在提供一种更有效的方式，为文档中的元素之间进行布局、对齐和分配空间 - 即便视口和元素的大小是动态变化的或者未知的，也能很好适应。

---

1）弹性容器，首先父元素如何设置？

• 首先开始使用弹性盒模型，只需先定义一个弹性容器（Flex Container）。即父元素设置display：flex或者display:inline-flex。

补充下display：flex和display:inline-flex的区别：如果父元素没有设置width，display：flex情况下父元素宽度会定为父元素的父元素宽度。display:inline-flex情况下父元素会自适应子元素宽度。

• 好了，将父元素设置成弹性容器后，我们就可以在弹性容器上用几个对齐属性了。(弹性项目flex-items,即弹性容器里的子元素）

1. flex-direction:row（默认） || column || row-reverse || column-reverse;（row是英文“行”，column是英文“列”意思，reverse是“反转，颠倒”的意思）控制弹性项目沿着主轴排列的方向。（direction是方向的意思）
   这个属性决定你的子元素在弹性容器里是水平排放还是垂直排放（左到右，上到下），或者这两个方向颠倒！

补充：从技术上讲，水平和垂直都不是弹性盒的世界中方向的叫法。它们被描述为主轴（main axis）和侧轴（cross axis）。

image.png

2. flex-wrap:wrap（默认值，表示一行flex-items数量再多，都不换行，只会缩小自己的宽度来适应！） || no-wrap || wrap-reverse;（可以这样理解，wrap为“包裹的”意思，即wrap包裹了为不换行；no-wrap不包裹了，装不下了就换行了； wrap-reverse是多出的行往上面排列，no-wrap是多出行往下继续排列。）
3. flex-flow:是 flex-direction 和 Flex-wrap的简写属性，同时带有这两个属性的值，类似于border。（flow英语“流动”的意思，这样理解，物体的 “流动 ”是有方向(direction)和是否溢出，即flow=direction+wrap.）
4. align-items:flex-start || flex-end || center || stretch || baseline 定义弹性项目如何在侧轴方向对齐,和 flex-direction的区别之处。
5. justify-content:flex-start (默认值)|| flex-end || center || space-between || space-around；定义弹性项目如何在主轴上对齐

我自己的通俗理解：

• justify:英语意思“使齐行；使每行排齐”，然后加上“content”内容，即是内容如何在行上（主轴）排列的。

• flex-start:"开始的"意思，flex-start,即可以猜到是从行的起始处开始排列，即主轴的起点排列，接下来，行都换成主轴来说。如图：

  
  
  

  image.png

• flex-end：不加赘述，和flex-start 相反，在主轴的终点开始排列。如图：

  
  
  

  image.png

• center:英语意思“中间”，就可以理解为主轴的中间处开始排列,如图：

  
  
  

  image.png

• space-between:让每个弹性项目之间保持相同的间距。如图：

  
  
  

  image.png

• space-around:让弹性项目两侧的间距保持相同。如图：

  
  
  

  image.png

好了，这是父元素要设置的属性，看似有点难记住。直接看图：

image.png