主页 / 问题 / 972671
Accepted
Raz Galstyan
Asked:2020-04-22 22:28:04 +0000 UTC2020-04-22 22:28:04 +0000 UTC

flex-wrap 的问题

  • 772

有问题flex-wrap。

我在容器中有 3 个块，在小屏幕分辨率下，中心块必须是第一个。

有没有办法只flex使用而不使用来实现这一点js？

这是示例本身：

/* Common Styles */
.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

html

1 个回答

  1. Best Answer

    @media screen and (max-width: 767px) {
  .green {
    order: -1;
  }
}

    • 1

相关问题