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!
×

December 2018

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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 [1/2]

⬛⬛⬛
FLEXBOX
PART I



Let's learn how to use display:flex!

Flexbox is a newer CSS module that allows for a cleaner, easier way to lay content out on a webpage. It has its own set of CSS declarations and is very robust. In this two-part tutorial I'm going to teach you all about display:flex and how to use it.

Before we start this tutorial, I'd like you to keep in mind the page I used when I learned flex over at CSS Tricks. If you need a second source for flex information, that page will give you tons and tons of information on flexbox and how it works! (This page is regularly updated to keep up with web standard.)

What does flexbox do?

Let's go with a visual representation, eh? The following three containers all have the exact same divs in the exact same order. They are all using the same flex properties. The only difference is container widths.

1
2
3
4
1
2
3
4
1
2
3
4


Let's look at another example. In this one, we're wanting to make a cast list without using a table, because we want to be able to move characters around easily without potentially breaking a column or row (say, for instance, if you alphabetize your list, and every add day new characters need to go into specific areas on the list.) The only difference between these two containers is that the second one sets the display of the main container to flex and the first one does not.

Title Header
Character 1
Character 2
Character 3
Title Header
Character 1
Character 2
Character 3


Now that we have some visual representations of the basics of what flexbox is designed to do, let's get into the details and see some code examples!

How do we use it?

Say you have a code with three content blocks, and you want them all to sit next to each other. All you need to do is specify flex in the outer container and specify a 100% width for the containers you want to be inline:

<div style="margin:0 auto;width:500px;background:rgba(0,0,0,0.06);display:flex;">

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:100%;">
Content 1
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:100%;">
Content 2
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:100%;">
Content 3
</div>

</div>


Content 1
Content 2
Content 3


But say your situation is different, and you need them to be able to wrap each time a row has more than three; we can do that too! Your next step would be to tell the flex container to wrap and opt for set widths based on your container width or divided percentage widths so that it knows when to wrap:

<div style="margin:0 auto;width:500px;background:rgba(0,0,0,0.06);display:flex;flex-wrap:wrap;">

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 1
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 2
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 3
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 4
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 5
</div>

</div>


Content 1
Content 2
Content 3
Content 4
Content 5


And if you want different widths, you can do that too!

<div style="margin:0 auto;width:500px;background:rgba(0,0,0,0.06);display:flex;flex-wrap:wrap;">

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:450px;">
Content 1
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 2
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 3
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:116px;">
Content 4
</div>

<div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);width:450px;">
Content 5
</div>

</div>


Content 1
Content 2
Content 3
Content 4
Content 5


You're probably noticing by now that when we use wrap with flex we suddenly can't just set everything to 100% and have perfectly even columns. Once you set a flex container to wrap you have to start doing some math. Your inner containers' widths are relative to your outer container's width (obviously), but they also have to take into account the margin and padding being used or you'll have content wrapping before you want it to or overflowing off the side of the container.

This math is kind of annoying; anything we can do about that?

Sure! If you'd rather be able to divide things with simple percentages that don't need to take margin and padding into account, you have a very easy solution: Rather than putting your margin, padding, border, background color, etc. into the container that's being controlled by flex, put it in a div inside of that div. So, for instance, the above code could become the below code instead for easier handling of math without sacrificing function or appearance:

<div style="margin:0 auto;width:500px;background:rgba(0,0,0,0.06);display:flex;flex-wrap:wrap;">

<div style="width:100%;"><div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);">
Content 1
</div></div>

<div style="width:33.3%;"><div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);">
Content 2
</div></div>

<div style="width:33.3%;"><div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);">
Content 3
</div></div>

<div style="width:33.3%;"><div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);">
Content 4
</div></div>

<div style="width:100%;"><div style="margin:5px;padding:20px;background:rgba(0,0,0,0.06);">
Content 1
</div></div>

</div>


Content 1
Content 2
Content 3
Content 4
Content 1


Do you have to use divs?

No. If you set a container to flex, even if it's a link tag, you can control multiple items inside of that the same way. Let's use a song link intended to go inside of a playlist as our example. In this example we want all items evenly spaced, but they do not need an even width because they aren't going to have paddings/background/etc:

<a href="URL" style="display:flex;justify-content:space-between;">
<b>Song</b>
<span>Artist</span>
<span>0:00</span>
</a>




-If you're wondering what this specification for flex is that I've just introduced, let's keep going and head over to part two of the flex tutorial!


PART II! ♡

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.