【问题标题】:Flexbox responsive row column layoutFlexbox 响应式行列布局
【发布时间】:2018-03-19 13:33:53
【问题描述】:

我有以下

HTML

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

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

移动

平板电脑

桌面

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

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

【问题讨论】:

    标签: html css flexbox


    【解决方案1】:

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

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

    #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>
    

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

    【讨论】:

    • 干得好,您已经展示了我所描述的内容并同时发布了 :)
    • @TidyDev 你无法想象,我多么感谢你。
    【解决方案2】:

    使用order

    @media(min-width:768px) {
      .flexbox {
        flex-flow: row nowrap;
      }
      ...
    }
    

    总计

    .flexbox {
      display: flex;
      flex-direction: column;
      background: #565656;
      padding: 5px;
      align-content: space-between;
      justify-content: space-between;
    }
    
    .flexbox>div {
      text-align: center;
      padding: 20px 0;
      margin: 5px;
    }
    
    .flexbox>.left {
      background-color: #D30058;
    }
    
    .flexbox>.center {
      background-color: #36ABE1;
    }
    
    .flexbox>.right {
      background-color: #23B776;
    }
    
    @media(min-width:576px) {
      .flexbox {
        flex-flow: row wrap;
      }
      .flexbox>.left {
        order: 1;
        flex: 0.5;
      }
      .flexbox>.right {
        order: 2;
        flex: 0.5;
      }
      .flexbox>.center {
        order: 3;
        width: 100%;
      }
    }
    
    @media(min-width:768px) {
      .flexbox {
        flex-flow: row nowrap;
      }
      .flexbox>div {
        width: 33.33% !important;
      }
      .flexbox>.left {
        order: 1;
      }
      .flexbox>.center {
        order: 2;
      }
      .flexbox>.right {
        order: 3;
      }
    }
    <div class="flexbox">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>

    【讨论】:

      【解决方案3】:

      有一个名为 order 的 flexbox 属性在这里可能很有用,因为您希望中心 div 排在最后:https://css-tricks.com/almanac/properties/o/order

      可能还有其他解决方案,但这是您应该知道的:) 提示:您可以使用媒体查询来根据需要更改顺序。

      另见flex-flow: row wrap;

      【讨论】:

        猜你喜欢
        • 2021-06-12
        • 2019-10-13
        • 2017-06-07
        • 2021-03-08
        • 2017-11-05
        • 2022-01-12
        • 2019-08-24
        • 1970-01-01
        • 2017-04-16
        相关资源
        最近更新 更多