Kadas99 Kadas99 - 1 month ago 13
CSS Question

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>




Answer

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/