重新安排移动和桌面的弹性项目

Question

我正在尝试使用 flex 进行以下布局：

我可以用 flex 做这个布局吗？

.objectref-use .page-header {
  display: flex;
  flex-direction: row;
}
.objectref-use .page-header .header-col {
  flex: 1;
  display: flex;
}
.objectref-use .page-header .header-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.objectref-use .page-header .header-content .together-content {
  flex-wrap: nowrap;
}
.objectref-use .page-header .objectref-title {
  margin-right: 8px;
}
.objectref-use .page-header .objectref-title.header-col {
  justify-content: flex-start;
}
.objectref-use .page-header .objectref-title .header-content {
  flex: 0 1 auto;
  background: blue;
}
.objectref-use .page-header .objectref-timeline {
  flex: 0 0 35px;
  display: flex;
}
.objectref-use .page-header .objectref-timeline .header-content {
  background: pink;
  flex: 1 1 100%;
}
.objectref-use .page-header .objectref-menu.header-col {
  justify-content: flex-end;
}
.objectref-use .page-header .objectref-menu .header-content {
  flex: 0 1 auto;
  background: green;
}
@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
  }
  .page-header .header-row {
    flex-direction: row;
  }
}
@media screen and (max-width: 480px) {
  .page-header {
    flex-direction: column;
  }
  .page-header .header-col {
    flex: 1;
  }
  .page-header .objectef-timeline {
    margin: 0;
  }
}

<div class="objectref-use">
  <div class="page-header">
    <div class="header-col objectref-title">
      <div class="header-content">
        <h1>title here (can be loooong) [block 1]</h1>
        <h6>text on next line</h6>
      </div>
    </div>

    <div class="header-col objectref-timeline">
      <div class="header-content">timeline [block 3]</div>
    </div>

    <div class="header-col objectref-menu">
      <div class="header-content">
        <div class="together-content">
          few button groups here [block 2]
        </div>
        <h6>text on next line</h6>
      </div>
    </div>
  </div>
</div>

这是the current CSS on Codepen。谢谢。

Answer 1

是的，您可以使用 css order 属性更改 order of flex elements。

Fiddle

您还可以通过调整 flex 值来更改 flex 元素的宽度、将某些元素堆叠在一起等等。

看看这个guide for more information。

Fiddle

ul {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  margin-bottom: 25px;
}

li {
  background: lightblue;
  text-align: center;
  flex: 0 1 50%;
  list-style: none;
}

.one {
  background: green;
  -webkit-order: 2;
  order: 2;
}

.two {
  background: olive;
  -webkit-order: 3;
  order: 3;
}

.three {
  -webkit-order: 1;
  order: 1;
  flex: 1 0 100%;
}

.four, .five, .six {
  border: 1px solid red;
  flex: 1;
}

.seven, .eight, .nine {
  border-bottom: 1px solid white;
  flex: none;
  display: block;
  width: 100%;
}

<ul>
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>
</ul>

<ul>
  <li class="four">1</li>
  <li class="five">2</li>
  <li class="six">3</li>
</ul>

<ul>
  <li class="seven">1</li>
  <li class="eight">2</li>
  <li class="nine">3</li>
</ul>