css中的display

display

在css中display标识着一个盒子的显示类型。常见的属性值如下：

display: none;
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;

none

display: none 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们.
在css中还可以通过visibility来控制元素的显隐。

display: none与 visibility:hidden的区别：
display: none 。该元素将被隐藏，并且页面将显示为好像该元素不在其中。
visibility: hidden隐藏的元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局。

flex

display: flex 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

<div style="display:flex">
  <p>项目</p>
  <div>
     项目
	<p>不是flex项目</p>
  </div>
</div>

容器的属性

• flex-direction: row | row-reverse | column | column-reverse

决定主轴的方向（即项目的排列方向）

• flex-wrap

flex-wrap属性定义，如果一条轴线排不下，如何换行

• flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

• justify-content

justify-content属性定义了项目在主轴上的对齐方式

• align-items

align-items属性定义项目在交叉轴上如何对齐

所以通过flex布局可以实现居中对齐。

项目的属性

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。

存在剩余空间才会放大

原理：（只考虑系数）

A,B,C三个元素在父元素display:flex下变为flex元素，

默认A,B,C的 flex-grow : 0;

ABC的宽度不足以填满父元素，就会留下剩余空间（Left-Space: LS），这时给B设置flex-grow: 1;

最终显示的效果为:

A的宽度 = A原来的宽度 + LS * （ 0 / (0 + 1+ 0) )

B的宽度 = B原来的宽度 + LS * （ 1 / (0 + 1+ 0) )

C的宽度 = C原来的宽度 + LS * （ 0 / (0 + 1+ 0) )

(0 , 1 , 0分别为ABC的 flex-grow 的值)

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小

溢出才会缩小

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度(高度)之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

原理：（不仅要考虑系数,还要考虑元素本身的宽度）

A,B,C三个元素在父元素display:flex下变为flex元素，

默认A,B,C的 flex-shrink : 1;

ABC的宽度大于父元素，就会产生溢出空间（Over-Space: OS），这时给B设置flex-shrink: 2;

最终显示的效果为:

（总权重）w = WA * 1 + WB * 2 + WC * 1; (WA,WB,WC为ABC的宽度)

A的宽度 = A原来的宽度 - OS * ( WA * 1 / w)

B的宽度 = B原来的宽度 - OS * ( WA * 2 / w)

C的宽度 = C原来的宽度 - OS * ( WC * 1 / w)

(1 , 2 , 1分别为ABC的 flex-shrink 的值)

这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。
当flex-shrink设置为0时，表示大家都不缩小适应。

flex-basis

flex-basis 的默认值是auto，即子项的基本尺寸根据其自身的尺寸决定。而这个自身尺寸与下面这几个方面有关：

• box-sizing盒模型；
• width/min-width/max-width等CSS属性设置；
• content内容（min-content最小宽度）

flex-basis的尺寸是作用在content-box上的，这个和width属性是一样的。设置的是元素在主轴上的初始尺寸，即元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如果设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

flex-basis:0时，该item会折叠到最小的宽度
flex-basis 设置width或height属性一样的值（比如100px），则项目将占据固定空间

同时，在Flex布局中，flex-basis优先级是比width高的。

所以，flex-basis和width同时设置了具体的数值，则width属性值不生效。

flex

flex是 flex-grow，flex-shrink, flex-basis的缩写,默认值为 0 1 auto。
可以使用一个，两个或三个值来指定 flex 属性。

单值语法：
值必须是以下之一：
一个 flex-grow的有效值（number）：此时简写会扩展为 flex: flex-grow 1 0。
一个 flex-basis 的有效值：此时简写会扩展为 flex: 1 1 flex-basis。
关键字 none 或者全局关键字之一。

双值语法：
第一个值必须是一个 flex-grow 的有效值。
第二个值必须是以下之一：
一个 flex-shrink 的有效值：此时简写会扩展为 flex: flex-grow flex-shrink 0。
一个 flex-basis 的有效值：此时简写会扩展为 flex: flex-grow 1 flex-basis。

三值语法：
值必须按照以下顺序指定：
一个 flex-grow 的有效值。
一个 flex-shrink 的有效值。
一个 flex-basis 的有效值。

• flex: 1 = flex: 1 1 0
• flex: 2 = flex: 2 1 0
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑

注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值