时间戳

首页 > 解决方案 > Flexbox 有问题 2 列 3 项

css - Flexbox 有问题 2 列 3 项

问题描述

我试图让我的 flexbox 项目正确包装，但似乎无法让它按照我需要的方式工作。我有部分（紫色、粉色、蓝色），粉色和蓝色的高度可能不同，因此很难为容器设置正确的高度。粉色一般高度较短，而蓝色一般较长但可以较短。粉红色永远不会像紫色那样高。桌面上的布局，这不是我想要的，目前看起来像这样：

当前桌面布局

我希望桌面看起来像这样：

正确的桌面布局

移动布局正确，如下所示：

移动布局

我的代码目前是

    #container {   display: flex;flex-wrap: wrap;}
    #purple {flex: 0 0 25%; max-width: 25%; width: 25%}
    #pink {    flex: 0 0 75%; max-width: 75%;width: 75%}
    #blue {    flex: 0 0 75%; max-width: 75%;width: 75%}
<div id="container">
    <section id="purple"><img /></section>
    <section id="pink"><p>small content block</p></section>
    <section id="blue"><p>large content block</p></section>
    </div>

标签： cssflexbox

解决方案

I see your expected view works for mobile view and You can use media-query for desktop view,

  • For Desktop view, you need to flow you container in column direction and apply max-height to wrap items of container.

      @media only screen and (min-width: 768px){
          #container {   
          display: flex;
          flex-flow:column wrap;
          max-height:100vh;
        }
          #purple{
            height: 100vh;
            margin-right:15px;
          }

        }

推荐阅读