Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

May 2019

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

How to Use Flexbox [2/2]

⬛⬛⬛
FLEXBOX
PART II



LET'S RECAP!

Last time during our flex tutorial we learned about the basics of flexbox, how to use it, and what it's used for. This time we're going to focus on some fine-tuning elements and neat things you can do with basic flex module specs, so if you need a refresher or to start from the beginning, go on back to part one first! And, as always, you can check out the page I used to learn flexbox over at CSS Tricks for much of the same information (and probably a couple of things I won't end up covering here as well) if you need more information from a different writer's standpoint!

POSITIONING USING FLEXBOX

For this demonstration we're going to use a header similar to the one found in S2 Complete Style for visualization purposes, but just keep in mind that you can use these flex specs with any form of content you like. Here is our base header; it's 300px high and has a title, subtitle, and navigation inside of an inner div:

TITLE
SUBTITLE
NAVIGATION


<div style="height:300px;background:#eee;text-align:center;">

<div>
<div>TITLE</div>
<div>SUBTITLE</div>
<div>NAVIGATION</div>
</div>

</div>


Without flex if we wanted to vertically center the content within a container we'd want to forego using a set height and use something more like padding:150px 0; instead to set the content in the middle:

TITLE
SUBTITLE
NAVIGATION


<div style="padding:150px 0;background:#eee;text-align:center;">

<div>
<div>TITLE</div>
<div>SUBTITLE</div>
<div>NAVIGATION</div>
</div>

</div>


That's a good method, and it's simple and quick, but it won't account for things like if the end result winds up having less than or more than the three lines of content shown above, or if you change the size of those things, so if you want the content height to stay a specifically set height you're going to have a lot more factors to consider and your code will end up needing to reflect that. The same goes for using line-height to vertically center text. Great for some situations, but not all.

Here's the great thing about using flex to do this instead: It's just as simple and leaves you with more options. How would we do this with flex? Like so:

TITLE
SUBTITLE
NAVIGATION


<div style="height:300px;background:#eee;text-align:center;display:flex;align-items:center;justify-content:center;">

<div>
<div>TITLE</div>
<div>SUBTITLE</div>
<div>NAVIGATION</div>
</div>

</div>


Now you can change the header height, the size of the fonts, remove elements, add elements, etc., and your content will stay vertically centered without ever having to adjust the coding that centers it. Everything inside of the inner div holding the titles and navigation will stay where you want them. And we're not done yet! Buckle up, because you can also move your content to any part of the container just by changing the positions for align-items and justify-content.

The align-items spec vertically positions your content and the justify-content spec horizontally positions your content. That's really all there is to it! Picture a 3x3 grid of any dimensions: You can set your content in any quadrant of that nine square grid depending on your combination of alignment and justification. Here's a handy dandy cheat sheet demonstration!

justify-content:flex-start;
align-items:flex-start;
justify-content:center;
align-items:flex-start;
justify-content:flex-end;
align-items:flex-start;
justify-content:flex-start;
align-items:center;
justify-content:center;
align-items:center;
justify-content:flex-end;
align-items:center;
justify-content:flex-start;
align-items:flex-end;
justify-content:center;
align-items:flex-end;
justify-content:flex-end;
align-items:flex-end;


And, of course, the above grid guide was laid out using flex specs from the previous part of this tutorial for the containers and this part of the tutorial for the inner content. (Alignments not shown: align-items:stretch; [default value], align-items:baseline;, justify-content:space-evenly;, justify-content:between;, justify-content:space-around; [justifications left out due to the talking point being singular element alignments.])

SO WHAT'S NEXT?

Now let's talk about positioning multiple items inside of a flex container! Let's bring that flex header back, eh? Except this time we'll set the inner container to flex rather than the outer container, that way the individual items inside are being laid out rather than a single block containing all of them.

TITLE
SUBTITLE
NAVIGATION


<div style="background:#eee;text-align:center;">

<div style="height:300px;display:flex;align-items:center;justify-content:center;">
<div>TITLE</div>
<div>SUBTITLE</div>
<div>NAVIGATION</div>
</div>

</div>


Been there, done that, got the t-shirt. Wanna see something fun? I bet you do!

TITLE
SUBTITLE
NAVIGATION


<div style="background:#eee;text-align:center;">

<div style="height:300px;display:flex;align-items:flex-end;justify-content:space-between;">
<div>TITLE</div>
<div style="align-self:center;">SUBTITLE</div>
<div>NAVIGATION</div>
</div>

</div>


In this example we're using the spec I gave you a peek at in the previous part, justify-content:space-between; in combination with a different spec: align-self. This flex spec is used when you want an item inside of a flex container to align differently than the default alignment you've chosen for the elements. So, for instance, if you want all elements centered, but you want one specific element at the top of your container, you're just a spec away! The align-self spec can use all alignments shown in the grid cheat sheet, just remember that it's for individual items inside of a flex container and not the flex container itself. Please note that there is no justify-self flex spec.

I hope this tutorial set has cleared up the mystery of how to get started with flexbox for you guys! Please comment with any questions you might have and I'll be happy to answer them and likely start a little flex FAQ on this post as well.

♡ You're Done! BACK TO PART I



Items not covered in my flexbox tutorial: align-items, flex-flow, order, flex-grow, flex-shrink, flex-basis. These specs were left out because the original nature of this tutorial was to explain the basics and a few fun features of flex so that the full range of flex would be less confusing to tackle, and these are the specs I don't find myself using much, if at all. If you'd like a part three to this tutorial to go over the things I've decided not to cover, please let me know and I'd be happy to!

Comments

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.