微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在具有多个弹性项目的弹性框中将元素浮动到右侧

如何解决如何在具有多个弹性项目的弹性框中将元素浮动到右侧

假设我有一个这样的flexBox设置:

<div class="flexBox">
    <div id="item-1"></div>
    <div id="item-2"></div>
    <div id="item-3"></div>
</div>

我目前已经使用CSS设置了flex项目,如下所示:

-------------------------------------------------
|    1     |            2           |     3     |
-------------------------------------------------

我希望项目在屏幕达到特定大小时更改为这种布局:

    --------------------
    |    3    |    1   |     
-----------------------------
|             2             |
-----------------------------

我知道我可以使用#item-3 {order:-1}将其移到开头,但是我遇到问题的部分是将元素1浮动到右边的2上方。

感谢您的帮助,谢谢!

解决方法

最小宽度是解决方案:

.flexbox {
      display: flex;
      flex-wrap: wrap;
    }
    .flexbox div {
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
    }
    #item-1,#item-3 {flex: 1;}
    #item-2 {flex: 2;}
    @media(max-width: 768px) {
      #item-1,#item-3 {
        order: 1;
      }
      #item-2 {
        order: 2;
        border-top: 0;
        min-width: 100%;
      }
    }
    <div class="flexbox">
        <div id="item-1"></div>
        <div id="item-2"></div>
        <div id="item-3"></div>
    </div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。