多宽度弹性柱

Question

我一直在为 flexbox 列布局而苦恼。我正在尝试创建一个 3 列布局，该布局一直垂直延伸到页面末尾 (height:100%;)。但是，其中 2 列必须具有在不同尺寸的屏幕上仍会按比例缩小的特定宽度，这可能吗？

CSS:

.container {
    display: -webkit-flex;
    display: flex;
    height: 100%;
}
.initial {
    -webkit-flex: initial;
    flex: 1;
    width: 510px;
    min-width: 100px;
}

.flex1 {
    -webkit-flex-basis: 28px; /* Safari 6.1+ */
    flex-basis: 28px;
}
.flex2 {
    -webkit-flex: 2;
    flex: 2;
}

HTML

<div class="container">
    <section class="elem initial">
        <div id="Left">
            <h1>Heading</h1>
            <p>Lorem Ipsum...</p>
        </div>
    </section>

    <section class="elem flex1">
        <div class="col"><img src="img/stripe"/></div>
    </section>

    <section class="elem flex2">
        <div id="Right">
            <h2>Header</h2>
            <ul>
                <li>List item.</li>
            </ul>
        </div>
    </section>
</div>

Answer 1

Here's a working example 您可能正在寻找的内容，如果我理解正确的话。

我已经对代码中的重要内容进行了注释。查看代码，并将其与您自己的代码进行比较。你一直在使用一些不必要的 flexbox 元素，比如 flex-basis: 28px; 应该只是 width: 28px;

HTML

<div class="container">
    <section class="elem initial">
        <div id="Left">
            <h1>Heading</h1>
            <p>Lorem Ipsum...</p>
        </div>
    </section>

    <section class="elem flex1">
        <div class="col"><img src="img/stripe"/></div>
    </section>

    <section class="elem flex2">
        <div id="Right">
            <h2>Header</h2>
            <ul>
                <li>List item.</li>
            </ul>
        </div>
    </section>
</div>

CSS

html, body {
    height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
    display: flex; /* Adds flex functionality */
    height: 100%;
}
.initial {
    width: 510px;
    min-width: 100px;

    background-color: orange;
}

.flex1 {
    width: 28px;

    background-color: red;
}
.flex2 {
    flex: 1; /* Fills the rest of the available space */

    background-color: green;
}

更新

我为了根据这个问题作者的评论创建一个新的工作示例而分叉了这支笔。他希望列在一定大小时换行，而排水沟会消失 - 我已经使用媒体查询来完成此操作。

Link to the new forked CodePen

HTML也是一样

CSS

html, body {
    height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
    display: flex; /* Adds flex functionality */
    flex-direction: column;
    height: 100%;
}
@media all and (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}
.initial {
    width: 510px;
    min-width: 100px;

    background-color: orange;
}

.flex1 {
    display: none;    
}

@media all and (min-width: 768px) {
    .flex1 {
        display: flex;
        width: 28px;
        background-color: red;
    }   
}
.flex2 {
    flex: 1; /* Fills the rest of the available space */

    background-color: green;
}

记住您的供应商前缀。

多宽度弹性柱

Multiple width flexicolumns

flexbox