Flexbox 响应式行列布局 [英] Flexbox responsive row column layout

问题描述

我有以下内容

HTML

<div class="left"></div><div class="center"></div><div class="right"></div>

我想使用 flexbox 实现以下布局.

移动

平板电脑

桌面

我对移动和桌面布局没有问题，但无法解决平板电脑的问题.

如何强制.center div出现在.letf和.right之后?有没有办法用 flexbox 实现它?

解决方案

此代码将在平板电脑中实现您想要的功能，您可以将其包装在平板电脑大小的媒体查询中.

关键是设置左右宽度为50%，居中为100%，然后声明"flex-flow:row wrap;"在容器上.

#container{显示:弹性；flex-flow:行包装；}.剩下{订单:1；宽度:50%；背景颜色:红色；}.对{订单:2；宽度:50%；背景颜色:绿色；}.中央{订单:3；宽度:100%；背景颜色:蓝色；}<div id="容器"><div class="left">left</div><div class="center">center</div><div class="right">right</div>

这是带有演示的笔 https://codepen.io/Washable/pen/ZXxYPJ

I have the following

HTML

<div>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

I want to achieve the following layouts using flexbox.

Mobile

Tablet

Desktop

I have no problem with mobile and desktop layouts, but could not solve it for tablets.

How to force .center div appear after .letf and .right? Is there a way to achieve it with flexbox?

解决方案

This code will achieve what you want in tablet, you can wrap it in a media query for tablet size.

The key is to set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.

#container{
  display:flex;
  flex-flow: row wrap;
}
.left{
  order: 1;
  width:50%;
  background-color: red;
}
.right{
  order: 2;
  width:50%;
  background-color: green;
}
.center{
  order: 3;
  width:100%;
  background-color: blue;
}

<div id="container">
   <div class="left">left</div>
   <div class="center">center</div>
   <div class="right">right</div>
</div>

Here's a pen with a demo https://codepen.io/Washable/pen/ZXxYPJ

这篇关于Flexbox 响应式行列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！