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

{p> 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;
}

记住您的供应商前缀。

多宽度柔性柱

1 个答案: