Question

I'm trying to create a page using FlexBox so i can keep the main image always centered with the top logo and page. And add of "off-center" text, next to the left.

My problem now is that i cannot make each box (image+text) keep their place vertically, boxes float and they have different space between each other based on what i'm using to view (big screen, laptop).

Not an expert with FlexBox, can i do that?

And also, i want to add a bar after the third box, 100% width...but it's placing in the middle of the page, between the boxes.

Any help will be welcome and i'll keep learning :)

  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

flexbox和绝对定位的组合只会使您发生很多事情。以下是您的摘录的一个版本，其中注释了许多不必要的CSS（以便您可以确切地看到它的意思）以及一些新的内容。

除了删除某些绝对位置以外，最重要的更改是从flex-wrap中删除.container并添加flex-direction: column并匹配.center和{{ 1}}，因此您可以在.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;
    }
  }*/

FlexBox: How can i keep boxes fixed one below the other

2 个答案: