display:flex的用法

铁灵

已于 2023-06-28 19:22:35 修改

阅读量886

点赞数

文章标签： css3 css 前端

于 2023-06-28 19:12:44 首次发布

本文链接：https://blog.csdn.net/virus111222/article/details/131443178

版权

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;
  }

效果：

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

关注