CODEWITHSUNDEEP
css
Davor Budimir
Davor Budimir

Reputation: 416

css display flex broke layout

I'm using flex property for my custom blockquotes, here's demo:

http://jsfiddle.net/buda9/pumZH/3/

Everything works fine when I use plain text in it. But when I add or
layout isn't so nice :) I made a temporary fix by using display: block but then my icon in :before pseudo element isn't vertically aligned and I need this icon to be in the middle

blockquote {
    display:flex;
}

Trying to fix this for the last 2 days

Upvotes: 0

Views: 138

Answers (1)

user3448600
user3448600

Reputation: 4018

Your demo is little confusing, but I can tell you that this is not a good use case for Flexbox layout. It is not intended for things like this one. Better use old methods for this like floats, absolute positioning,etc. You need to wrap your content inside a blockqoute in some block-level box to trigger correct behavior of flexbox layout. HERO IS UPDATED DEMO: http://jsfiddle.net/pumZH/4/ Is this what you want ?

Upvotes: 1

Related Questions