CODEWITHSUNDEEP
htmlcssflexbox
Ajlec12
Ajlec12

Reputation: 45

Flex Box Divs Stacking instead of being horizontal

So I am trying to create a flexbox that has several divs inside of it. The divs have an image and a button that should stack but then I would like them to align in a row. I cannot seem to get them to actually go into a row instead they are stacking. Here is the HTML and CSS:

.block2 {
  display: flex;
  flex-direction: row;
}

.tan {
  background: #FFEFD5
}

.kite1 img {
  height: 150px;
  width: 130px;
  padding: 30px;
}

.kite1button img {
  height: 50px;
  width: 125px;
}

.kite2 img {
  height: 150px;
  width: 130px;
  padding: 30px;
}

.kite2button img {
  height: 50px;
  width: 125px;
}
<div class="block2 tan">
  <div class="kite1">
    <img src="kite1.png" />
    <div class="kite1button">
      <img src="deltasbutton.png" />
    </div>
  </div>
  <div class="kite2">
    <img src="diamond-kite.png" />
    <div class="kite2button">
      <img src="diamondsbutton.png" />
    </div>
  </div>
  <div class="kite3">
    <img src="specialty-kite.png" />
    <div class="kite3button">
      <img src="specialty-button.png" />
    </div>
  </div>
</div>

Upvotes: 1

Views: 757

Answers (1)

oldboy
oldboy

Reputation: 5954

Change kite1, kite2, and kite3, to kite.

Then style the kite class like so:

.kite {
  display: flex;
  flex-direction: column;
}

P.S. If you're going to be using an identifier (i.e. class= or id= or data-whatever=, etc) once, use id. If you plan on using an identifier on multiple elements, always use class. ids can only be used on one element, whereas class can be used on an indefinite number of elements.

.block2 {
  display: flex;
}

.kite {
  display: flex;
  flex-direction: column;
}
<div class="block2 tan" >
  <div class="kite">
    <img src="kite1.png" />
    <div class="kite1button">
      <img src="deltasbutton.png"/>
    </div>
  </div>
  <div class="kite">
    <img src="diamond-kite.png"/>
    <div class="kite2button" >
      <img src="diamondsbutton.png"/>
    </div>
  </div>
  <div class="kite">
    <img src="specialty-kite.png"/>
    <div class="kite3button">
      <img src="specialty-button.png"/>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions