Vue使用flex将图片并排居中且左对齐

jjw_zyfx

于 2024-07-31 21:57:35 发布

阅读量162

点赞数 1

分类专栏： css vue 文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/140833311

版权

vue 同时被 2 个专栏收录

139 篇文章 1 订阅

订阅专栏

css

71 篇文章 0 订阅

订阅专栏

先看效果：

在这里插入图片描述

在看代码

<template>
  <div class="outer">
    <div class="inner">
      <div class='each_image' v-for="(item,index) in image_list" :key="index">
        <img class="image_class" src="./assets/logo.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      image_list:["./assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png"]
    }
  },
}
</script>

<style lang="less">
.outer{
  width: 90%;
  height: 100vh;
  margin: 0 auto;

  .inner{
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background-color: pink;

    // 一下内容是重点 让子元素进行flex 布局
    display: flex;
    // 一行容不下就拐弯
    flex-wrap: wrap;
    .each_image{
      flex-basis: 25%; // 项目占据主轴（父容器宽）的空间。 和父容器的flex配合使用来控制当前元素
      //border: 1px solid blue;
      height: 250px;
	  // 下边这个flex 是用来控制子元素(image_class)居中的
      display: flex;
      align-items: center;
      justify-content: center;
      
      .image_class{
        border: 1px solid black;
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>