Question

我想将我的页面分成几列。实际上我只需要三个，但我可能还需要几个。

所以我用过这个：

<style>
.container {
    display: flex;
}

.column {
    flex: 1;

    /*for demo purposes only */
    background: #f2f2f2;
    /*border: 1px solid #e6e6e6;*/
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    text-align: center;
}

.column-one {
    order: 1;
}
.column-two {
    order: 2;
}
.column-three {
    order: 3;
}
</style>

所以我的页面在三个不同且相等的列中完全分开。但我希望第二个比其他人小（50％）。

我已经尝试减少.column-two class的宽度，但它不起作用。这个代码之王可以做到这一点吗？

我真的很喜欢这个结构，因为如果我要添加一个列，我不必更改整个CSS。这就是为什么我要保留这段代码。

Answer 1

如果您将flex: 1添加到第二列，将flex: 2添加到其他两列，则第二列将是其他两列的半宽或50%宽度。如果你不打算改变它，你也不需要使用订单。

＆＃13;

.container {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.column {
    /*for demo purposes only */
    background: #f2f2f2;
    /*border: 1px solid #e6e6e6;*/
    box-sizing: border-box;
    padding-top: 50px;
    text-align: center;
    border: 1px solid black;
    margin: 5px;
}

.column-one {
    flex: 2;
}
.column-two {
    flex: 1;
}
.column-three {
    flex: 2;
}

＆＃13;

<div class="container">
  <div class="column column-one"></div>
  <div class="column column-two"></div>
  <div class="column column-three"></div>
</div>

＆＃13;

Answer 2

       .container {
            display: flex;
            min-height: 200px;
        }

        .column {
            background: #f2f2f2;
            border: 1px solid black;
            margin: 3px;
        }

        .column-one {
            flex: 1;
        }
        .column-two {
            flex: 0.5;
        }
        .column-three {
            flex: 1;
        }

 <div class="container">
          <div class="column column-one"></div>
          <div class="column column-two"></div>
          <div class="column column-three"></div>
 </div>

如果您想稍后使用四列。

                .column-one {
                    flex: 1;
                }
                .column-two {
                    flex: 0.5;
                }
                .column-three {
                    flex: 0.5;
                }
                .column-four {
                    flex: 1;
                }

一个较小的CSS3列

2 个答案: