Why I can't position flex items in my flexbox?-CodePudding

So I have a 3 flexboxes and flex items inside of them. I need them to be on the left, like on the following image:

But for some reason my image and header are stuck on the right, and can't even be aligned with align-items. So I have the following result:

I'm not really sure what's the problem here, I tried to do float:left for image, but it doesn't move.

art_container is a huge container, inside of which are 3 flexboxes - art_block, and flex items inside of them.

.article img{
    position: absolute;
    top:0;
    right:0;
}

.art_container {
  position: relative;
  top: 10%;
  left: 0;
  /* transform: translateY(30%) translateX(30%); */
  width: 100vh;
  height: 110vh;
  background-color: white;
}

.art_block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-width: 100%;
  height: 300px;
  background-color: black;
  border-bottom: 1px solid white;
}

.art_block img {
  flex: 1 1 auto;
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 2px solid red;
}

.art_block h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Open Sans", sans-serif;
}

<article class="article">
    <div class="art_container">
      <div class="art_block" id="block1">
        <img src="https://via.placeholder.com/300">
        <h2>Sony's new releases for 2018</h2>
      </div>
      
      <div class="art_block" id="block2">
        <img src="https://via.placeholder.com/300">
        <h2>10 tips to be a better gamer</h2>
      </div>
      
      <div class="art_block" id="block3">
        <img src="https://via.placeholder.com/300">
        <h2>Microsoft has some new tips</h2>
      </div>
    </div>
</article>

Edit: so i've found that i have another image style for outside container, which i guess may affect my flex image:

.article img{
    position: absolute;
    top:0;
    right:0;
}

So that's a style for a bigger div, inside of which is my art_container, and now i'm wondering, how could i make .art_container img style, while not being affected by .article img style?

CodePudding user response：

Simply use flex-wrap: no-wrap; so your image and text remains on the same line. I've add a wrapper for your text so you can add some p tags inside

.art_container {
  position: relative;
  top: 10%;
  left: 0;
  /* transform: translateY(30%) translateX(30%); */
  width: 100%;
  height: 110vh;
  background-color: white;
}

.art_block {
  position: relative;
  display: flex;
  flex-wrap: no-wrap;/* use this */
  min-width: 100%;
  height: 300px;
  background-color: black;
  border-bottom: 1px solid white;
}

.art_block img {
  flex: 1 1 auto;
  width: 300px;
  height: 200px;
  object-fit: cover;
}


.art_block h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Open Sans", sans-serif;
}

<div class="art_container">
  <div class="art_block" id="block1">

    <img src="https://via.placeholder.com/300">
    <div class="wrap-text">
      <h2>Sony's new releases for 2018</h2>
    </div>
  </div>

  <div class="art_block" id="block2">
    <img src="https://via.placeholder.com/300">
    <div class="wrap-text">
      <h2>10 tips to be a better gamer</h2>
    </div>
  </div>

  <div class="art_block" id="block3">
    <img src="https://via.placeholder.com/300">
    <div class="wrap-text">
      <h2>Microsoft has some new tips</h2>
    </div>

  </div>
</div>

CodePudding user response：

Sometimes the best strategy is just to step back and simplify. I'm not sure why you have all the fixed sizing on the images and containers, but that's probably not necessary. If you have minimum sizes in mind, use other means to ensure that, such as wrapping to vertical using media queries. The more you stay flexible the simpler your layout will be.

Here's a start.

.art_block {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  background-color: black;
  border-bottom: 1px solid white;
}

.art_block img {
  flex: none;
  max-width: 200px;
  object-fit: cover;
  border: 2px solid red;
  margin: 15px;
}

.art_block h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Open Sans", sans-serif;
  margin: 15px;
}

<div class="art_container">
  <div class="art_block" id="block1">
    <img src="https://via.placeholder.com/300">
    <h2>Sony's new releases for 2018</h2>
  </div>
  
  <div class="art_block" id="block2">
    <img src="https://via.placeholder.com/300">
    <h2>10 tips to be a better gamer</h2>
  </div>
  
  <div class="art_block" id="block3">
    <img src="https://via.placeholder.com/300">
    <h2>Microsoft has some new tips</h2>
  </div>
</div>