概要

本文是在实际的电子商城项目开发中分类中商品橱窗展示中遇到的问题以及解决的办法。

主要有两个方面：
第一、使用flex的方法实现自动排列；
第二、正方形的CSS实现方法；

第一、是比较容易实现的，难点是在正方形的CSS实现方法。

如果要实现自适应的正方形，难度是较大的。必须要让width=hight。但是一般在流式布局的情况下，height要等于width，一般都必须使用js的方法。
这个时候就要用到一些巧妙的方法，让height可以等于width。

使用Flex实现自动排列，功能每行排三个

这个比较简单，直接上代码

<div class="list" style="width:300px">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<style>
.list{
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row;
    border: solid 1px black;
}
.list .item{
    flex: 0 1 auto;
    width: 33%;
    text-align:center;

}
</style>

效果为：

正方形CSS的实现

第一种方法，使用paddint-bottom

设置padding-bottom撑开容器，关键点：padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width。
也就是用padding-bottom:100%，这个100%是采用的width的值，自然就实现了宽和长的相等。

具体代码实现：

<div style="border: solid 1px blue;width:80px">
    <div class="square2">我和我的祖国，一刻也不能分离</div>
</div>

<style>
.square2{ 
    border:solid 1px red;
    padding-bottom:100%; 
    height:0px;
    }
</style>

关键部分：

padding-bottom:100% 等于width；
height: 0；如果不设置，div的内容会把表格撑开；

第二种方法，使用两个div，一个是外层的relative，一个是内层的absolute，利用绝对定位消除空间占比。

实际上这个方法和上一个方法类似，依然是使用padding-bottom的属性。

<div style="border: solid 1px red;width:80px">
    <div  class="square1" style="border: solid 1px blue;">
        <div class="square2">我和我的祖国，一刻也不能分离</div>
    </div>
</div>

<style>
.square1{ 
    position: relative;
    padding-bottom:100%;
    height: 0;
    width: 100%;
}

.square2{
    position: absolute;
    width: 100%;
    height: 100%; 
    top: 0px;
    left: 0px;
}
</style>

在此使用第二种方法实现橱窗效果，其中将第二个内层的absolute的div标签替换为img，在我的代码中的具体实现为：


<div class="box-border flex-initial text-center" style="width:33.3%;padding:10px;" v-for="(item_1, index_1) in item.categorys" :key="index_1">

    <!-- 正方形第一层 -->
    <div style="display:block;border:0px;position:relative;padding: 50% 0px 50% 0px">
        <!-- 正方形第二层 -->
        <img style="position:absolute;top:0px;left:0px;width:100%;height:100%;vertical-align:top" :src="'' + $oss + '/' + item_1.url + ''" />
    </div>
    
    <!-- 分类名称  -->
    <div class="w-full text-center" style="font-size:12px;margin-top:5px;">{{ item_1.name }}</div>

</div>

具体实现效果：