如何使用弹性框（不使用媒体查询）来制作响应式界面组件

Using flexbox to make responsive widgets without media queries. With a fixed width column

css3, flexbox

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2063
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.fluidWidthDownToAPoint {
    -webkit-box-flex: 999999;
    -webkit-flex-grow: 999999;
    -ms-flex-positive: 999999;
    flex-grow: 999999;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-flex-basis: 400px;
    -ms-flex-preferred-size: 400px;
    flex-basis: 400px;
}
.fixedUnlessOnOwnRow {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-flex-basis: 300px;
    -ms-flex-preferred-size: 300px;
    flex-basis: 300px;
}
.fluidWidthDownToAPoint {
    background: rgba(186, 218, 85, 0.5);
    padding: 20px;
    box-sizing: border-box;
}
.fluidWidthDownToAPoint:after {
    color: rgba(0, 0, 0, 0.4);
    content: "Fluid width down to 400px, then 100% width when on own row.";
}
.fixedUnlessOnOwnRow {
    background: rgba(218, 170, 170, 0.5);
    padding: 20px;
    box-sizing: border-box;
}
.fixedUnlessOnOwnRow:after {
    color: rgba(57, 25, 25, 0.5);
    content: "Fixed width of 300px unless on own row. Width 100% when on own row.";
}
h4 {
    color: rgba(0, 0, 0, 0.3);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
h4:after {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.3), inset -1px 0 0 rgba(0, 0, 0, 0.3);
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    top: 50%;
    left: 0;
    right: 0;
}
html {
    font-family: sans-serif;
    background: #ddd;
}
h4 {
    text-align: center;
    margin-top: 3em;
}
.container {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    background: transparent;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border: 2px solid white;
    border: none;
    box-shadow: inset 0 0 0 10px white;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
}
.column100 {
    width: 100%;
}
.column80 {
    width: 80%;
}
.column60 {
    width: 60%;
}
.column40 {
    width: 40%;
}
.column20 {
    width: 20%;
}

HTML

<h3>Various width containers</h3>
<p><em>Get changing that browser window width already</em>
</p>
<h4 class="column100">Container 100% width</h4>
<div class="container column100">
    <div class="fluidWidthDownToAPoint"></div>
    <div class="fixedUnlessOnOwnRow"></div>
</div>

<h4 class="column80">Container 80% width</h4>
<div class="container column80">
    <div class="fluidWidthDownToAPoint"></div>
    <div class="fixedUnlessOnOwnRow"></div>
</div>

<h4 class="column60">Container 60% width</h4>
<div class="container column60">
    <div class="fluidWidthDownToAPoint"></div>
    <div class="fixedUnlessOnOwnRow"></div>
</div>

<h4 class="column40">Container 40% width</h4>
<div class="container column40">
    <div class="fluidWidthDownToAPoint"></div>
    <div class="fixedUnlessOnOwnRow"></div>
</div>

<h4 class="column20">Container 20% width</h4>
<div class="container column20">
    <div class="fluidWidthDownToAPoint"></div>
    <div class="fixedUnlessOnOwnRow"></div>
</div>

<hr>

<h3>Nesting the HTML</h3>
<div class="container">
    <div class="fluidWidthDownToAPoint">
        <div class="container">
            <div class="fluidWidthDownToAPoint"></div>
            <div class="fixedUnlessOnOwnRow"></div>
        </div>
    </div>
    <div class="fixedUnlessOnOwnRow">
        <div class="container">
            <div class="fluidWidthDownToAPoint"></div>
            <div class="fixedUnlessOnOwnRow"></div>
        </div>
    </div>
</div>

Using flexbox to make responsive widgets without media queries. With a fixed width column

css3, flexbox

编辑器支持Emmet

快捷键

Using flexbox to make responsive widgets without media queries. With a fixed width column

css3, flexbox

一款响应式CSS3网格布局模板（带@support特性查询）

使用CSS3弹性框（Flexbox）实现的标签栏控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：