i'm playing around with pet minion and trying learning flex box with it!! whenever i change the display property to flex, i lose the spacing between the " Minion Name the Minion". I've been trying to figure out how to get it back through things like word spacing, but I can't for the life of me get it to work. I'm probably doing something silly since I'm new to flexbox, so any help is appreciated!

See below! v v v

{ height: 120px; width: 190px; display: flex; align-items: center; flex-flow: row wrap; justify-content: center;}

img { height: 64px; width: 64px; margin: 3px; order: -1;}

I'd also love to find a way to completely obliterate the "Blah blah has a minion!" text and put the minion name and whatnot where that is, but I don't think it's possible with how it's currently implemented on the site?

not a big deal though, since im just messing around with flexbox and getting a feel for it!! :) i'm probs using it completely wrong and it's probs easier to accomplish some of this with float but w/e

This is the code I use to get rid of the "Pet has a minion!" text.

{text-indent: -2000px;}

Basically I just shove that line of text out of sight towards the left somewhere. However I have no idea if it'll work with flex since I have no idea what that even is.

I found a cheap hack to do this actually lol. You can see it in action on my mortiking's page.

{ font-size: 0pt; } b { font-size: 10px!important; } b:last-of-type::before { content: 'the '; } br + b { text-transform: uppercase; }

Explanation:

• First line: sets the minion box's font size to 0. This hides all the text within it.
• Second line: I don't actually think the !important is necessary but this sets the bold text to have a font size. (Of course you can change this size to whatever you want.) Both the minion name and species are within b tags so this will style these. Note that you can't use a relative font unit here since the parent font size is 0 (and any percentage of 0 is still 0)
• Third line: The word "the" in between the minion name and species is still hidden with a font size of 0. So here I actually just spoof it - I add it back in with a pseudo-element. You can also add styles to make it however you want.
• Fourth line: Also optional, but I wanted to make just the minion's name uppercase and not the species. So this is a hack to select just the minion's name (the b tag that comes right after a br tag in the minion box)

Feel free to run with this, I'd love a line of credit for coding help somewhere if you do though :)

Anyway I'll try and answer your main question but it's not super clear to me why you're using flex here (or what you're trying to accomplish with it) It would help if you could link the profile in question ?

So display:flex works very differently from the other display options. Unfortunately "Minion the blah" is not within its own container, so each word is treated as its own separate element (inline by default because it's text). So to define how you want to space these, you have to think of it like trying to define the spacing between arbitrary elements - That is, don't think of it as text, think of it as arbitrary children of the flex container. Flexbox provides a couple utilities for spacing items (look up, for instance, flex-basis and justify-content: space-between) but in general this is not ideal for spacing words. And in general when designing with flexbox each element is sort of responsible for its own margins (more than it being controlled by the parent container).

That's why I wanted to ask what you're trying to accomplish by using flex on this element. It's not to say you can't use flex elsewhere, or that this isn't a neat learning opportunity, but I think this particular element isn't well-suited for it.

If you want to continue, one option would be to use the hacks I shared above to select the individual words/phrases and apply hard-coded styles to each. Good luck and I hope this helps!

Oh, I had forgotten the text-indent trick. I rarely ever mess around with minions tbh other than slapping them in boxes for commissions. >< Thanks for remind me of it LMAO

Thanks for the tip. I'll make sure to credit you if I use it at all.

I wasn't really trying to accomplish anything with it, haha. ;; I was just playing around with the functionality of it, but it's clear I don't really know what I'm doing I guess... ;; It's not actually on any pet or anything though, I was just playing around with it in developers tools. Thank you for the explanation on why it was happening though. I'll probably just try it on something else or stick to what I know, I suppose.