flex: 元素以弹性布局方式显示，可以通过设置父元素的 display: flex 属性来实现子元素的弹性布局。常用于实现响应式布局和灵活的元素排列。

当使用 display: flex; 将元素容器设置为弹性布局时，子元素会自动填充容器，并根据容器的宽度进行调整。如果容器中的子元素数量增加，它们的宽度会自动缩小以适应容器。

示例：

（以微信小程序为例，在其他前端设计中一原理一样）

js文件：

决定放几个图片

imageNumber:[1,2,3,4,5,6]

wxml文件：

<view  class="imageBox">
    <image src="/images/kaishi.png" mode="widthFix" wx:for="{{imageNumber}}"/>
</view>

wxss文件：

  .imageBox{
      display: flex;
  }
  image{
      width: 50px;
      height: 50px;
  }

效果：

 如果没有设定display:flex是什么效果

  .imageBox{

  }
  image{
      width: 50px;
      height: 50px;
  }

 没有区别

我们放多一点图片看看

imageNumber:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

 效果：

 将图片自动变小了，放在一行里面（ 将元素容器设置为弹性布局时，子元素会自动填充容器，并根据容器的宽度进行调整。如果容器中的子元素数量增加，它们的宽度会自动缩小以适应容器。）

  如果没有设定display:flex是什么效果：

  .imageBox{

  }
  image{
      width: 50px;
      height: 50px;
  }

会自动换行，但图片大小不会变

image是inline（内联元素），我们试一下block块元素有什么区别

js:

imageNumber:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

wxml：

<view  class="imageBox">
<view  wx:for="{{imageNumber}}">
    <image src="/images/kaishi.png" mode="widthFix" />
</view>
</view>

wxss:

  .imageBox{
      display: flex;
  }
  image{
      width: 50px;
      height: 50px;
  }

效果：

 依然会放在一行里面，但是不会缩小图片，超出的会溢出