Flexbox layouts for beginners – Web design tutorial (using the Old UI)

Articles, Blog

Flexbox layouts for beginners – Web design tutorial (using the Old UI)

Flexbox layouts for beginners – Web design tutorial (using the Old UI)


Flexbox — which we’ll often refer to as
“flex”, “flexible box layout”, or “magic” — is an extremely powerful layout tool which
gives us precise control over elements in a box. This lesson is an intro to Flexbox, which
is why we’ve named it Intro to Flexbox. Instead of going step-by-step right through
the detailed Flexbox spec, we’re going to simply cover the relationship between flex
containers (the parents) and flex items (the children). Let’s talk containers. A flex container is the parent element. Flexbox starts when you create a flex container
out of something. With this section selected, let’s switch our
display setting to flex. And that’s it. We’ve created a flex container. This unlocks all our flex options underneath. If we have multiple items in our flex container,
we can choose if we want our layout to be horizontal or vertical. And of course, we have options for justification
and alignment of the items inside our container. We can also reverse the items in our layout,
or even wrap these items if their total width exceeds the inner boundary of the container. But that’s the flex container. Let’s talk about the flex items (the children). Any of the items directly inside (any direct
children of the flex container) are referred to as flex items. We can select these and configure layout options
which can add to or even override settings we set on the flex container. We can do this on various elements — but
keep in mind that in CSS, layout is part of styling. So we can use classes to control how various
elements are to behave. Now something that’s really important to note:
properties we set on flex containers? They only affect their direct children. So here, we have a section with a div block
inside. Nothing special on our div block. It’s just a div block. It’s holding some content. And if we select our section (which is serving
as the flex container), we can see that we’ve set our flex layout controls. The div block is being centered. But notice how as we adjust our layout options,
the children of the div block remain unaffected. Now we could select the div block and make
it a flex container, too, but the point is that flex containers — in this case the
section — the controls we set on flex containers only affect their direct children. Not their children’s children. So. Essentially, Flexbox layouts are achieved
between two types of elements: a flex container (the parent element) and a flex item (the
child element). You can have many flex items inside your flex
container, and you can use a div or any kind of container to nest and group other elements
to sort them however you’d like.

7 thoughts on Flexbox layouts for beginners – Web design tutorial (using the Old UI)

Leave a Reply

Your email address will not be published. Required fields are marked *