CODEWITHSUNDEEP
htmlcssflexbox
NewJsGuy
NewJsGuy

Reputation: 113

display flex breaking mulitline text box

I had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this

[[first box] [second box] [third box]]

so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides

each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned

[[first box] [second box] 
                          [third box]]

and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-

.general-cont {
  width: 100%;
  text-align: center;
}

.each-cont {
  width: 32.5%;
  display: inline-block;
  margin-top: 6px;
}

.each-cont:nth-of-type(3n+2) {
  margin-left: 10px;
  margin-right: 10px;
}

.img-cont {
  float: left;
  height: 48px;
  display: flex;
  align-items: center;
}

.text-cont {
  height: 48px;
  overflow: hidden;
  align-items: center;
  text-align: left;
  display: flex;
}
<div class="general-cont">
  <div class="each-cont">
    <a>
      <div class="img-cont">
        123
      </div>
      <div class="text-cont">
        456
      </div>
    </a>
  </div>

  <div class="each-cont">
    <a>
      <div class="img-cont">
        ABC
      </div>
      <div class="text-cont">
        DEF
      </div>
    </a>
  </div>

  <div class="each-cont">
    <a>
      <div class="img-cont">
        QWE
      </div>
      <div class="text-cont">
        ASD
      </div>
    </a>
  </div>

</div>

Upvotes: 1

Views: 1923

Answers (1)

Paul Redmond
Paul Redmond

Reputation: 3296

You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:

.general-cont {
  display: flex;
  flex-direction: row;
  flex-flow: center;
  align-items: stretch;
}

.each-cont {
  background: #eee;
  margin: 0 10px;
  padding: 10px;
}


.img-cont {
  display: block;
}

http://codepen.io/paulcredmond/pen/rrRvkk

I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Related Questions