flex横向布局时item之间间距以及行距设置的问题

Question

html结构

 <div class="container">
            <div class="card" v-for="item in names"  :key="item.key">
                <div class="card-title">{{item.label}}</div>
                <div class="switch-status">
                    <div class="status">
                        <img src="../../img/Energy/ic_clo.png">
                        <div>
                            当前状态：<span v-if="item.value" class="normal">运行</span><span class="error" v-else>关闭</span>
                        </div>
                    </div>
                    <div class="switch">
                        <el-switch v-model="item.value" active-text="开" inactive-text="关" active-color="#13ce66"
                            inactive-color="#F1F5F8">
                        </el-switch>
                    </div>
                </div>

            </div>
        </div>

css

.container {
    flex-flow: wrap;
    background-color: #001647;
    padding: 1%;
    display: flex;
}
.switch-status{
    display: flex;
    padding: 10px;
}
.card{
    background: url(../../../img/Energy/bg_sb.png) no-repeat;
    width: 10%;
    margin: 20px 0;
}
.card-title{
    padding: 5px;
    color:#17b5db;
}
.status{
    text-align: center;
}
.switch{
    margin: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

此时的布局时

两行之间的间距异常的大

当我改变窗口大小之后

同一行之间的间距变的很窄 上下两行间距仍旧很大

求问解决方法

实现类似的布局

两行之间的行距可以用 align-content: flex-start; 解决掉

但是同一行之间的item在 改变浏览器窗口大小的时候如何响应呢

Answer 1

之所以，你改变窗口大小的时候横向布局会很挤，是因为你被card设置width：10%的宽度；

两行之间的行距可以用 align-content: flex-start; 解决掉

两行直降的间距应该用是用margin去间距，align-content属性只是让所有子元素，尽量向上挤

.container {
    flex-flow: wrap;
    background-color: #001647;
    display: flex;

}
.switch-status{
    display: flex;
    padding: 10px;
}
.card{
    background: url('~@/assets/logo.png') no-repeat;
    margin: 20px 0;
    margin: 10px
}

---

最后：你贴出的希望图，一般情况下，他在改变屏幕宽度的时候也会存在水平右部间距异常，解决这个问题也不是没有办法

思路如下：
window.resize方法中主动去修改该横向布局的间隔即可，但是这里涉及到计算，咱们flex-warp:warp是竟可能撑满，那么最多的情况是水平右部多出不到一个元素item的空间，计算将空间均分分布在元素中间即可

Answer 2

你可以在你的.container 设置{
justify-content:space-between；
}
给你的 .card设置具体的宽度。

Answer 3

1.flex左右使用margin会不相等，那就别用flex,直接用百分比，主要改一下html的格式套一层，这样就完事了

          #boxs {
            margin: 10px;
        }

        .items {
            width: 10%;
            float: left;
        }
        .card {
            background: red;
            height: 200px;
            margin: 10px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

    <div id="boxs">
        <div class="items">
            <div class="card">1</div>
        </div>
        <div class="items">
            <div class="card">1</div>
        </div>
    </div>

2.如果非要使用flex,下面代码效果一样

       #boxs {
            display: flex;
            flex-flow: wrap;
            flex-direction: row;
        }

        .items {
            width: 10%;
        }
        .card {
            background: red;
            height: 200px;
            margin: 10px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }