柔性物品堆叠在彼此之上

Question

我正试图抓住flex并努力创造我所追求的东西.

我想做什么

• 全屏容器
• 两个div元素,一个右对齐,宽度为640px一个,左对齐,剩下的空间

发生了什么

我的元素在屏幕的中心彼​​此叠加显示.

码

div.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
  height: 100vh;
}
div.hero {
  background-size: cover;
  background-position: center bottom;
  position: relative;
  height: 100vh;
  width: 100%;
  margin: auto;
}
div.timeline {
  width: 640px;
  margin: auto;
}
div.header {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  /* color: #fff; */
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%);
  -ms-transform: translate(0, calc(-50% - 66px));
  /* IE 9 */
  -webkit-transform: translate(0, calc(-50% - 66px));
  /* Safari */
  transform: translate(0, calc(-50% - 66px));
}

<div class="flex">

  <div class="hero">

    <!-- Header -->
    <div class="header">
      <h1>Title</h1>
      <h2 class="subtitle">Subtitle</h2>
    </div>
    <!-- End header -->

    <!-- Timeline -->
    <div class="timeline">
      <ul class="timeline-both-side">
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
        <li class="opposite-side">
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p>
          </div>
        </li>
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.</p>
          </div>
        </li>
        <li class="opposite-side">
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- End timeline -->

  </div>

</div>

题

我如何使用flex这两个元素,100vh如下所示？

+------------------------------------------+
|.flex                                     |
|+-------------------------+ +------------+|
||.hero                    | |.timeline   ||
||                         | |            ||
||                         | |            ||
|+-------------------------+ +------------+|
+------------------------------------------+

Answer 1

简单本身.

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: flex;
}
.hero {
  flex: 1;
  background: red;
}
.timeline {
  flex: 0 0 640px;
  background: green;
}

<div class="parent">
  <div class="hero"></div>
  <div class="timeline"></div>
</div>

Codepen演示