Flex布局

• flex布局是为是提供一种更有效的方式来布置，对齐和项目之间在一个容器中分配空间。
• 主要是适应所有类型的显示设备和屏幕尺寸，flex容器会扩展项目以填充可用的可用空间，或收缩它们以防止溢出。
• Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则用于较大规模的布局。

概念

• 主轴：弹性容器内项目会默认沿着主轴排布从main-start到main-end。(主轴方向可以改变，例如变为垂直方向)
• 侧轴：与主轴垂直的轴

弹性容器的属性(父容器)

定义一个父容器

.container {
  display: flex;
}
复制代码

.container {
  display: inline-flex;
}
复制代码

• 弹性容器里的项目也可以设置为弹性容器，行内元素也可以设置为弹性容器

flex与inline-flex的区别

div{
    display: flex;
    background-color: pink;
}
div span {
    width: 150px;
    height: 100px;
    background-color: purple;
}
div span:nth-child(2) { 
    height: 150px;
}
复制代码

1. 当设置为flex时：
2. 当设置为inline-flex时：
3. 注意:没有给父容器设置宽高，inline-flex父容器会根据子项目自适应宽高

flex-direction(弹性方向)

  .container {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

1. 设置主轴，设置子项目排布方向
2. row（默认值）：从左到右
3. row-reverse：从右到左
4. column：从上到下
5. column-reverse：从下到上
6. 

flex-wrap(柔性包装)

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

1. nowrap （默认）：所有弹性项目都将在一行上
2. wrap：弹性项目可以换行从上到下，每次换行按照主轴方向排列
3. wrap-reverse：弹性项目可以换行从下到上，每次换行按照主轴方向排列

flex-flow(柔性流)

.container {
  flex-flow: column wrap;
}
复制代码

1. 就是flex-direction和flex-wrap写在了一起，更好知道项目的排列方式

justify-content(调整内容)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
复制代码

1. 以主轴基准，定义内容的对齐方式(可对照概念图理解)

3. space-around和space-evently的区别

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(项目到边缘的间隔是项目与项目之间的一半)
• space-evenly：分配项目，以使任意两个项目之间的间距（以及到边缘的间距）相等。
• Chrome不支持start / end / left / right。

align-items(项目对齐)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
复制代码

1. stretch （默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）

• 当子项目不指定宽高是，项目才会被拉伸

2. flex-start：项目放置在侧轴的起点
3. flex-end：项目放置在侧轴的末端。
4. center：项目在横轴上居中
5. baseline：项目基线对齐.(在我看来)弹性容器内的子项目会根据能代表其内容的基线位置进行对齐。

align-content(内容对齐)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
复制代码

1. normal （默认）：将项目包装在默认位置，就像未设置任何值一样。
2. flex-start：包装到容器开头的项目。
3. flex-end：包装在容器末端的物品。
4. center：位于容器中心的项目
5. space-between：物品平均分配；第一行在容器的开头，而最后一行在容器的结尾
6. space-around：项目在每行周围均匀分布，并具有相等的空间
7. space-evenly：项目均匀分布，周围有相等的空间
8. stretch：线条拉伸以占据剩余空间

• 注意：仅当flex容器具有多行flex项目时，此属性才有效。如果将它们放在单行中，则此属性对布局没有影响。

9. 把每一行当作一个整体进行布局

10. 所有column-*属性都对flex容器没有影响。

在::first-line和::first-letter伪元素并不适用于柔性容器。

弹性项目(子集属性)

order(顺序)

.item {
  order: 5; /* default is 0 */
}
复制代码

1. order属性控制它们在flex容器中出现的顺序(可以出现负值)

flex-grow(弹性成长)

.item {
  flex-grow: 4; /* default 0 */
}
复制代码

1. 这定义了弹性项目在必要时增长的能力。它接受作为比例的无单位值。它决定了项目应在flex容器内占用的可用空间量。
2. 如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍（或者至少会尝试）。(随浏览器自适应)
3. 负数无效。

flex-shrink(弹性收缩)

.item {
  flex-shrink: 3; /* default 1 */
}
复制代码

1. 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。(也可以给你想要固定不变的项目，定死宽高)
2. 负值对该属性无效。

flex-basis(弹性基础)

.item {
  flex-basis:  | auto; /* default auto */
}
复制代码

1. 需要深入了解的属性

弹性

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

1. 建议使用此速记属性，而不要设置各个属性。速记可以智能地设置其他值。

align-self(自我调整)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

1. 一个盒子在侧轴的排列方式

• 传统布局

1. 兼容性好
2. 布局繁琐
3. 局限性，不能在移动端很好的布局

• flex弹性布局

1. 操作方便，布局极为简单，移动端应用很广泛
2. PC端浏览器支持情况较差
3. IE11或更低版本，不支持或者只是部分支持
4. 自适应的效果

垂直居中真的超级简单

上文来自
css
阮一峰
pink老师