User:Lakelimbo/Flex

For a better visualization on Monobook, please go to preferences > appearance > turn on "Enable responsive MonoBook design"

How does the flex system works? It's pretty simple, but requires a bit of logical thinking as well. Basically, on the content area (i.e does not include the sidebar), imagine there are 12 columns of equal size. With that, you can specify that an element will span X amount of columns on a certain screen size, while Y on another screen size.

The following example shows 3 elements side-by-side on any type of screen:

Column 1

Column 2

Column 3

<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>

This one shows 4 columns, all side-by-side on desktop, but differently on mobile (resize the screen to see):

Column 1

Column 2

Column 3

Column 4

<div class="row">
<div class="col-sm-12 col-md-3">Column 1</div>
<div class="col-sm-6 col-md-3">Column 2</div>
<div class="col-sm-6 col-md-3">Column 3</div>
<div class="col-sm-12 col-md-3">Column 4</div>
</div>

Basically, this is a slightly modified (and simplified) flex grid based on Bootstrap (v5). With the 12 columns, there are 3 selectors for screen sizes: sm (all screen sizes), md (medium screens), lg (larger screens).

	sm	md	lg
Screen size	Any	≥768 px	≥992 px

When using col-sm-* alone, the element will span the selected amount of columns on any screen size, but if paired with col-md-* or col-lg-*, the effects will be applied only to smaller screens (<768 px).

As you may have noticed, each responsive element must be wrapped in a div with the class .row. This class defines some gutter properties and also adds the flex display itself to all elements inside.

If a .row has over 12 columns filled in a row, the next element will go to the bottom, so it doesn't really matter if there's more than twelve if you're trying just to align everything properly.

Also, inside each column element, you can place another .row inside and the element will have 12 equal columns as well!

Column 1

Column 2

Sub-column 1

Sub-column 2

Column 3

<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">Column 1</div>
<div class="col-sm-12 col-md-6">Column 2
<div class="row">
<div class="col-sm-6">Sub-column 1</div>
<div class="col-sm-6">Sub-column 2</div>
</div>
</div>
<div class="col-sm-12 col-lg-3">Column 3</div>
</div>

Now you may ask, why do we need this? It's simple: it's just better and simpler over time. Most people in the world nowadays browse the internet through their phones in a vertical position. It's pretty hard to visit WiKirby on phone without having to scroll vertically, zooming in/out, and of course, elements without fixed width getting squished.

It's pretty common to see on wikis a lot of tables inside tables for alignment purposes, which is definitely not good. Also, with flex it's possible to use some extremely useful CSS properties, such as align-items, justify-content, gap, etc.

Be aware that this system won't work on very old browsers (such IE 9 or below) why are people still using this.

If you have any questions about this or want me to recreate something, please use my talk page or ping me on WiKirby's Discord (Lake#1494). :)

Float

Oh yes, I also implemented some "responsive" floats, mostly for infoboxes that usually floats to the right. It uses the same system I mentioned on the grid (float-{BREAKPOINT}-{SIDE}):

• {BREAKPOINT} being sm, md or lg.
• {SIDE} being left, right or none.

This box right here floats to the right if the screen is medium or larger (float-md-right), but not when the screen is small (float-sm-none).

Element