《css新世界》-flex布局读书笔记

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

最近新入手了一本《css新世界》，打算向css这座大山发起猛攻~！废话不多说，这篇是是对于flex布局的学习笔记，加深下印象。

1.设置display：flex发生的事情：

flex子项块状化:如span标签可以设置尺寸了
flex子项浮动失效
flex子项支持z-index属性
flex子项的margin值不会合并，这个和块级别元素不同
flex子项如果被设置为绝对定位后，会脱离弹性布局。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>flex的学习</title>
  <style>
    .conatiner{
      display: flex;
    }
  </style>
</head>
<body>
  <div class="container">
    <span style="float: left;">1</span>
    <span style="z-index: 9;">2</span>
    <span style="float: right;">3</span>
    <span>4</span>
  </div>
</body>

</html>

2.flex-warp等一些属性的理解

2.1:flex-wrap属性:

flex-wrap主要是用来控制flex子项是单行显示还是换行显示。

nowarp:默认值，就是不换行，由此可能出现内容溢出的情况。
- 内容溢出解决方案:设置子项的max-width:100%
- 方案理解:因为max-width的优先级大于width属性的优先级，让子项尺寸从固定值，变为相对值。
wrap:这个没啥好说的了，子项尺寸大了，就换行显示
warp-reverse:这个就是把换行显示的内容，再上下颠倒下。

2.2:对齐特性综述：

下面是一些通用的含义:

justify表示水平方向的样式设置
align表示垂直方向的样式设置
items表示全体元素的样式设置
content表示整体布局样式
self表示元素自身样式的设置

由此，justify-content就表示整体布局的水平对齐设置其他的就不在过多阐述，用这种方式更容易理解吧，不再那么生硬的背了。

🌵Tips:

如果flex-direction的属性值是column或者是column-reserve，那么flex子项的垂直布局方式不用align-items去控制，而是使用justify-content。这里可以理解为justify-content其实是控制的主轴的布局，flex-direction会设置主轴方向👇：

flex-direction:row:主轴方向x水平方向(直角坐标系)
flex-direction:column:主轴方向y水平方向(直角坐标系)

3.flex属性的深入理解

3.1:flex掩藏的友好细节

flex属性是flex-grow、flex-shrink、flex-basis3个css属性的缩写，这个就类似background一样，饱含着bg-color啊等等的很多属性。

下面是集中对于flex的几种设置情况:

1个值的情况：
- flex:1:设置的是flex-grow属性
- flex:92px:设置的是flex-basis属性
2个值的情况：
- flex:1 92px:设置的是flex-grow属性和flex-basis属性
- flex:1 1:设置的是flex-grow属性和flex-shrink属性
3个值的情况就对号入座吧😑

3.2:`flex:1`、`flex:0`、`flex:none`以及`flex:auto`

flex:0:等同于flex: 0 1 0%，也就是basis是0%,表现为最小内容宽度，如果子项中内容是文字，则会出现一柱擎天的效果
flex:none:等同于flex:0 0 auto，表示没有,即flex子项没有弹性，flex-basis:auto即基础尺寸由内容决定,适合固定尺寸元素(无需设置width属性)
- 这个属性可以给类似按钮等固定尺寸的子项设置，而整体依然保持弹性。
flex:1:等同于flex:1 1 0%;
flex:auto:等同于flex:1 1 auto,这个就和名字一样，表示自动,即flex子项自动填满剩余空间或者自动收缩

🌵Tips:

对于flex:1和flex:auto，在容器尺寸不足的情况下的表现不同：

flex:1:表现比较腼腆,会充分利用剩余空间，但是不会侵犯其他子元素应有的空间
flex:auto:表现的比较霸道，会优先扩展自己的尺寸，会侵犯其他子元素应有的空间给自己