在桌面和移动设备上为 2 列和 3 列编写 flexbox 代码(包装)
Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)
我真的很难弄清楚这个 CSS flexbox 解决方案。基本上有 2 个问题,一个是 2 列布局,另一个是 3 列布局。
2 列:
我认为这可能非常简单:
3 列:
这可能更高级一点:
容器 class 是 .container
,子项只是 .left
、.right
和 .middle
。不确定它是否相关,但 .container
的宽度是视口的 100%。我可能应该补充一点,由于我无法控制的原因,使用 Bootstrap 是不可能的。
以下是三列的操作方法。我只是添加它,因为它有点棘手:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.left {
order: 1;
background: red;
flex-basis: 100%;
height: 300px
}
.middle {
order: 3;
background: green;
flex-basis: 100%;
height: 300px;
}
.right {
order: 2;
background: yellow;
flex-basis: 100%;
height: 300px;
}
@media screen and (min-width:600px) {
.container {
flex-wrap: nowrap;
}
.left {
flex-basis: 200px;
order: 1;
}
.middle {
flex-basis: 1;
order: 2;
}
.right {
flex-basis: 200px;
order: 3;
}
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
和 fiddle http://jsfiddle.net/2touox81/
如您所见,您可以为弹性项目设置列顺序。
希望对您有所帮助。
我假设桌面设备的屏幕宽度大于 600 像素,移动设备的屏幕宽度小于 600 像素。
2 列布局非常简单:
body {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
flex: 1 300px; /* Initial width of 600px/2
Grow to fill remaining space */
min-width: 0; /* No minimal width */
}
body {
display: flex;
flex-wrap: wrap;
text-align: center;
font-weight: bold;
}
#left, #right {
flex: 1 300px;
min-width: 0;
background: #f55;
padding: 15px 0;
}
#right {
background: #57f;
}
<div id="left">Left</div>
<div id="right">Right</div>
3 列只是稍微复杂一点:
body {
display: flex; /* Magic begins */
}
#left, #right, #middle {
min-width: 0; /* No minimal width */
}
#left, #right {
flex-basis: 200px; /* Initial width */
}
#middle {
flex: 1; /* Take up remaining space */
}
@media screen and (max-width: 600px) { /* Mobile */
body {
flex-direction: column; /* Column layout */
}
#left, #right {
flex-basis: auto; /* Unset previous 200px */
}
#middle {
order: 1; /* Move to the end */
}
}
body {
display: flex;
text-align: center;
font-weight: bold;
}
#left, #right, #middle {
min-width: 0;
padding: 15px 0;
}
#left, #right {
flex-basis: 200px;
background: #f55;
}
#right {
background: #57f;
}
#middle {
flex: 1;
background: #5f6;
}
@media screen and (max-width: 600px) {
body {
flex-direction: column;
}
#left, #right {
flex-basis: auto;
}
#middle {
order: 1;
}
}
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
我真的很难弄清楚这个 CSS flexbox 解决方案。基本上有 2 个问题,一个是 2 列布局,另一个是 3 列布局。
2 列:
我认为这可能非常简单:
3 列:
这可能更高级一点:
容器 class 是 .container
,子项只是 .left
、.right
和 .middle
。不确定它是否相关,但 .container
的宽度是视口的 100%。我可能应该补充一点,由于我无法控制的原因,使用 Bootstrap 是不可能的。
以下是三列的操作方法。我只是添加它,因为它有点棘手:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.left {
order: 1;
background: red;
flex-basis: 100%;
height: 300px
}
.middle {
order: 3;
background: green;
flex-basis: 100%;
height: 300px;
}
.right {
order: 2;
background: yellow;
flex-basis: 100%;
height: 300px;
}
@media screen and (min-width:600px) {
.container {
flex-wrap: nowrap;
}
.left {
flex-basis: 200px;
order: 1;
}
.middle {
flex-basis: 1;
order: 2;
}
.right {
flex-basis: 200px;
order: 3;
}
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
和 fiddle http://jsfiddle.net/2touox81/
如您所见,您可以为弹性项目设置列顺序。
希望对您有所帮助。
我假设桌面设备的屏幕宽度大于 600 像素,移动设备的屏幕宽度小于 600 像素。
2 列布局非常简单:
body {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
flex: 1 300px; /* Initial width of 600px/2
Grow to fill remaining space */
min-width: 0; /* No minimal width */
}
body {
display: flex;
flex-wrap: wrap;
text-align: center;
font-weight: bold;
}
#left, #right {
flex: 1 300px;
min-width: 0;
background: #f55;
padding: 15px 0;
}
#right {
background: #57f;
}
<div id="left">Left</div>
<div id="right">Right</div>
3 列只是稍微复杂一点:
body {
display: flex; /* Magic begins */
}
#left, #right, #middle {
min-width: 0; /* No minimal width */
}
#left, #right {
flex-basis: 200px; /* Initial width */
}
#middle {
flex: 1; /* Take up remaining space */
}
@media screen and (max-width: 600px) { /* Mobile */
body {
flex-direction: column; /* Column layout */
}
#left, #right {
flex-basis: auto; /* Unset previous 200px */
}
#middle {
order: 1; /* Move to the end */
}
}
body {
display: flex;
text-align: center;
font-weight: bold;
}
#left, #right, #middle {
min-width: 0;
padding: 15px 0;
}
#left, #right {
flex-basis: 200px;
background: #f55;
}
#right {
background: #57f;
}
#middle {
flex: 1;
background: #5f6;
}
@media screen and (max-width: 600px) {
body {
flex-direction: column;
}
#left, #right {
flex-basis: auto;
}
#middle {
order: 1;
}
}
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>