简单说一下flex布局

flex是一种不怎么操作子元素的布局方案，flex需要指定一个容器，当然flex会开启bfc

.container{
    dosplay:flex
}

• flex容器中所有的 直接子元素 会成为flex的item。
• flex容器有主轴和交叉轴，默认主轴水平，交叉轴垂直，左上角为起点。
• 容器的属性有6个

.container{
    flex-direction:row/column/row-reverse/column-reverse;
    justify-content:flex-start/flex-end/center/space-between/
                    space-around/space-evently;
    align-items:flex-start/flex-end/center/baseline(文字基线)/
                stretch(如果没有给item在交叉轴高度，它占满容器)
    flex-wrap:wrap(超出主轴线长度自动换行)/nowrap/wrap-reverse;
    align-content:flex-start/flex-end/center/around-between/
                  space-around/stretch
                  (这个属性在交叉轴上有多行item才生效)
} 

• 项目属性

.item1{
    order:1;  (根据数值定义元素排序)
    align-self:center;(自身在交叉轴的对齐方式)
    flex: 0 1 auto;
    (flex-grow,flex-shrink,flex-basis的简写)
}

flex: 0 1 auto; 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式，用于设置 flex 项目的伸缩属性。

• flex-grow 定义了项目在容器中的放大比例，默认值为 0。当容器有剩余空间时，flex 项目根据各自的 flex-grow 值来决定如何分配剩余空间。

  • 如果所有项目的 flex-grow 都为 0，它们将不会分配剩余空间，保持原始尺寸。
  • 如果一个项目的 flex-grow 值为 1，而其他项目的 flex-grow 值都为 0，那么这个项目将会占据剩余空间的全部或部分。

• flex-shrink 定义了项目在容器中的缩小比例，默认值为 1。当容器空间不足时，flex 项目根据各自的 flex-shrink 值来决定如何缩小尺寸。

  • 如果所有项目的 flex-shrink 值都为 1，它们将等比例缩小以适应容器。
  • 如果一个项目的 flex-shrink 值为 0，而其他项目的 flex-shrink 值都为 1，那么这个项目不会缩小。

• flex-basis 定义了项目在分配多余空间之前的初始尺寸，默认值为 auto。它指定了项目在没有任何弹性伸缩因子作用时的基础宽度。

  • 如果 flex-basis 设置为具体的长度值（如像素或百分比），则项目的初始尺寸将固定为该值。
  • 如果 flex-basis 设置为 auto，则项目的初始尺寸将由其内容决定。