我正试图抓住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,euismod sapien.</p>
</div>
</li>
<li class="opposite-side">
<div class="border-line"></div>
<div class="timeline-description">
<p>Quisque ac laoreet purus,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,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 || || | | || || | | || |+-------------------------+ +------------+| +------------------------------------------+
解决方法
简单本身.
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>
