FlexBox：我怎样才能让盒子固定在另一个下面

Question

我正在尝试使用 FlexBox 创建一个页面，这样我就可以使主图像始终以顶部徽标和页面居中。并在左侧添加“偏离中心”文本。

我现在的问题是我无法让每个框（图像+文本）保持垂直位置，框浮动，并且根据我用来查看的内容（大屏幕、笔记本电脑），它们之间的空间不同。

我不是 FlexBox 专家，我可以这样做吗？

另外，我想在第三个框之后添加一个栏，100% 宽度...但它位于页面中间，框之间。

欢迎任何帮助，我会继续学习:)

  body {
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100vh;
}

.top {
  border: 1px solid white;
  width: 50%;
  height: 10%;
  align-self: flex-start;
  text-align: center;
}

.inner-container {
  border: 1px solid white;
  width: 50%;
  height: 60%;
  display: flex;
}

.center {
  position: absolute;
  width: 50%;
    text-align: left;
    align-self: flex-end;
}

.off-center {
  position: absolute;
  vertical-align: bottom;
    text-transform: uppercase;
    padding-left: 10px;
    min-width: 200px;
    align-self: flex-end;
}

.center, .off-center {
  position: absolute;
}

.center img {width: 100%;}

.off-center h2 {font-size:12px; font-family: 'Open Sans', sans-serif; font-weight: 400;text-transform: uppercase; color:black; display: block!important;margin: 0px;}
.off-center p {font-size: 20px; font-family:'aileronbold', sans-serif; display: block!important;margin: 0px;text-transform: none;}

.row.subscriptionBar {display:flex; background-color: black; display: block; padding:20px;}
.subscriptionBar h2 {color:white;}
.firstPart {display: }

@media screen and (min-width: 769px) {
  .off-center {
    margin-left: 50%;
  }


@media screen and (max-width: 768px) {
  .off-center {
    margin-top: 105px;
  }
}

<div class="container">
  <div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
  <div class="inner-container">
    <div class="center">
    	<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
    <div class="off-center">
    	<h2 class="">ArtistName 1</h2>
		<p>509476ZclHtqXy</p></div>
  </div>
  <div class="inner-container">
    <div class="center">
    	<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
    <div class="off-center">
    	<h2 class="">ArtistName 2</h2>
		<p>Title lala 1</p></div>
  </div>
  <div class="inner-container">
    <div class="center">
      <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
    <div class="off-center">
      <h2 class="">ArtistName 3 444</h2>
    <p>Title 093830</p></div>
  </div>

</div>

Answer 1

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

header{
  background: tomato;
}

section{
  display: flex
}
.main {
  background: deepskyblue;
}

.main img{
  max-width: 100%;
}

.full-width {
  background: lightgreen;
}

.main    { order: 2; flex: 3 0px; }
.aside { flex: 1 auto; }
.aside-1 { order: 1; background: gold; width: 10%} 
.aside-2 { order: 3; background: hotpink; position: relative; width: 10%}
.aside-2 > span {
    position: absolute;
    bottom: 0;
    left: 0;
}
.vertical {
  width: 15%; /* Modify this value for different screen size*/
}
/* .full-width  { order: 4; } */
/*@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}*/
body {
  padding: 2em; 
}

<div class="wrapper">
    <header><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></header>
    <section>
        <div class="main">
        <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
        </div>
        <aside class="aside aside-1"></aside>
        <aside class="aside aside-2"><span>Aside Right</span></aside>
    </section>
        <section>
       <div class="main">
          <img src="https://picsum.photos/200/300" alt="">
       </div>
       <aside class="aside aside-1 vertical"></aside>
       <aside class="aside aside-2 vertical"><span>Aside Right</span></aside>
   </section>
    <section>
     <div class="main">
          <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
        </div>
        <aside class="aside aside-1"></aside>
        <aside class="aside aside-2"><span>Aside Right</span></aside>
    </section>

   <section class="full-width">Full Width</section>
    <section>
        <div class="main">
        <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
        </div>
        <aside class="aside aside-1"></aside>
        <aside class="aside aside-2"><span>Aside Right</span></aside>
    </section>
</div>

我只是做一个简单的示例，因为不清楚您要查找的内容。如果这是您希望前进的方向，那么我可以提供进一步的帮助。

Answer 2

你的弹性盒和绝对定位的组合发生了太多事情。以下是您的 sn-p 版本，其中大部分不必要的 css 已被注释掉（因此您可以确切地看到它是什么）以及一些新添加的内容。

除了删除一些绝对定位之外，最重要的更改是从 .container 中删除 flex-wrap 并添加 flex-direction: column 以及匹配 .center 和 .off-center 的宽度，以便您可以使用 position: absolute在 .off-center 上（在这种情况下很好地使用它）以及与宽度相等的 margin-left 以确保它位于图像容器的右侧。

  body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;
  flex-wrap: wrap;
  height: 100vh;*/
}

.top {
  border: 1px solid white;
  /*width: 50%;*/
  height: 10%;
  /*align-self: flex-start;*/
  text-align: center;
}

.inner-container {
  border: 1px solid white;
  /*width: 50%;*/
  height: 60%;
  display: flex;
  justify-content: space-around;
}

.center {
  /*position: absolute;*/
  width: 50%;
  min-width: 200px;
  text-align: left;
  /*align-self: flex-end;*/
}

.off-center {
  position: absolute;
  /*vertical-align: bottom;*/
  text-transform: uppercase;
  padding-left: 10px;
  width: 50%;
  min-width: 200px;
  align-self: flex-end;
  margin-left: 50%;
}


/*.center, .off-center {
  position: absolute;
}*/

.center img {
  width: 100%;
}

.off-center h2 {
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: black;
  display: block!important;
  margin: 0px;
}

.off-center p {
  font-size: 20px;
  font-family: 'aileronbold', sans-serif;
  display: block!important;
  margin: 0px;
  text-transform: none;
}

.row.subscriptionBar {
  display: flex;
  background-color: black;
  display: block;
  padding: 20px;
}

.subscriptionBar h2 {
  color: white;
}

.firstPart {
  display:
}

/*@media screen and (min-width: 769px) {
  .off-center {
    margin-left: 50%;
  }
  @media screen and (max-width: 768px) {
    .off-center {
      margin-top: 105px;
    }
  }*/

<div class="container">
  <div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
  <div class="inner-container">
    <div class="center">
      <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
    </div>
    <div class="off-center">
      <h2 class="">ArtistName 1</h2>
      <p>509476ZclHtqXy</p>
    </div>
  </div>
  <div class="inner-container">
    <div class="center">
      <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
    <div class="off-center">
      <h2 class="">ArtistName 2</h2>
      <p>Title lala 1</p>
    </div>
  </div>
  <div class="inner-container">
    <div class="center">
      <img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
    <div class="off-center">
      <h2 class="">ArtistName 3 444</h2>
      <p>Title 093830</p>
    </div>
  </div>

</div>