flex常用特性总结

flex特性：

1、当元素被设置成flex之后，子元素默认横向排列，且高度相等

2、 假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

3、flex-flow是flex-direction和flex-wrap的缩写

flex-direction: row;
flex-wrap: wrap;

以上代码可以替换为

flex-flow: row wrap;

4、flex项的动态尺寸

​ 这是一个无单位的比例值，表示每个flex沿主轴的可用空间大小。

​ 还可以指定flex的最小值。

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

这表示“每个flex”项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享。

弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器串口的大小，或者增加一个

元素，这时的布局仍旧是好的。

5、flex:缩写与全写

flex是一个可以指定最多三个不同值得缩写属性：

• flex-grow: 第一个是当空间足够的时候单个元素延伸量
• flex-shrink: 一般用于容器的flex项。这指定了从每个flex项中取出多少溢出量，以阻止它们溢出它们的容器。
• flex-basis：盒子的最小值

6、flex项排序

弹性盒子有可以该百年flex项的布局位置的功能，而不会影响到源顺序(即dom树元素里的顺序)，这是传统布局方式很难做到的一点。

button:first-child {
  order: 1;
}

你会看到第一个button移到了末尾。

• 所有flex项默认的order值是0

• order值大的flex项比order值小的显示顺序中更靠后。

• 相同order值的flex项按源顺序显示，假如有四个元素，其order值分别为2,1,1和0，那么它们的显示顺序就分别是第四、第二、第三和第一。

  也可以给order设置负值使它们比值为0的元素排得更前面。

  button:last-child {
    order: -1;
  }
  

7、gap、row-gap、column-gap

​ gap属性精确地控制了弹性元素之间地空间

8、flex-grow、flex-shrink、flex-basis

+  flex-grow: 这个flex子元素得到(伸张)多少
+  flex-shrink: 从这个flex子元素要消除(收缩)多少
+  flex-basis：在flex子元素未伸张和收缩之前，它的大小是多少

9、space-around与space-evenly

​ space-around只保证弹性元素之间地间隔相等

​ space-evenly可保证整个弹性盒子在主轴上地任何间隔相等

总结：

​ 1、flex的应用场景：

​ 自适应布局、盒子排列有规则的情况下可以使用。

​ 2、flex-basis如果设置为auto，浏览器会有什么样的默认行为？

​ flex-basis也就是弹性元素为伸缩时的主轴上的大小，如果设置为auto，则表明主轴上的宽度是自定义的，如果没有设置为auto，则无论怎么定义width都没有用，弹性元素在主轴上的宽度就是所设置的flex-basis的大小。

​ 3、如果设置flex:1,flex:2,相对应的三个属性值分别是多少？

​ 1、1、0%；2、2、0%

​ 4、如何弹性盒子设置为不自动换行，那么当内部元素溢出父元素尺寸，如何解决这种现象？

​ 可以给父元素先设定一个初始的固定宽度(此宽度远远小于屏幕的宽度)，然后利用弹性盒子flex:1;自适应地占据屏幕剩余宽度，不会让内部移除内容撑大自己的宽度，让自己出现滚动条，而是使内部移除的内容自己出现滚动条。