停止将柔性物品堆叠在一起

时间：2016-02-16 14:27:40

标签： html css css3 flexbox

我正试图抓住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   ||
||                         | |            ||
||                         | |            ||
|+-------------------------+ +------------+|
+------------------------------------------+

3 个答案:

答案 0 :(得分：8)

简单本身。

＆＃13;
＆＃13; 
body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: flex;
}
.hero {
  flex: 1;
  background: red;
}
.timeline {
  flex: 0 0 640px;
  background: green;
}
＆＃13; 
<div class="parent">
  <div class="hero"></div>
  <div class="timeline"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Codepen Demo

答案 1 :(得分：1)

考虑对CSS的这些调整：

div.flex {
    display: flex;
    /* flex-direction: row;   <-- not necessary; default value */
    /* flex-wrap: nowrap;     <-- not necessary; default value */
    /* align-items: stretch;  <-- not necessary; default value */
    height: 100vh;
}

div.hero {
    display: flex;                   /* nested flex container */
    justify-content: space-around;   /* moved here from div.flex, but not even necessary */
    background-size: cover;
    background-position: center bottom;
    position: relative;
    height: 100vh;
    width: 100%;
    /* margin: auto; <-- REMOVE */
}

div.timeline {
    width: 640px;
    /* margin: auto; <-- REMOVE */
}

div.header {
    flex: 1;              
}

DEMO

注意：

  • 创建弹性容器时（通过将display: flex或display: inline-flex应用于元素），子元素将成为弹性项目。灵活容器的后代超出子项不会成为弹性项目，因此不接受弹性属性。

    在您的代码中，div.flex是Flex容器。这意味着它唯一的子项 - div.hero - 是一个弹性项。但是，div.hero的子项不是弹性项目。它们仍然是标准块元素，这就是它们垂直堆叠的原因。

    使div.hero成为（嵌套的）Flex容器，以使其子项成为弹性项目。

  • margin: auto将灵活项目置于容器中心。这似乎不是你想要的，所以删除它。

  • 不需要应用于.header的绝对定位。
  • flex: 1告诉flex项消耗容器中的所有可用空间。

答案 2 :(得分：1)

您的结构不正确，.flex只有一个孩子：.hero

您可以简化CSS并分成两个子容器.hero＆amp; .timeline 

div.flex {
  display: flex;
  height: 100vh;
}
div.hero {
  background-size: cover;
  background-position: center bottom;
  position: relative;
  flex: 1;/* will use whole space left avalaible */
  margin: auto;
}
div.timeline {
  width: 640px;/* flex values are not usefull here since you want a static width */
  margin: auto;
}
div.header {
  text-align: center;
}
<div class="flex">

  <div class="hero">

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

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

相关问题
最新问题