Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts.
Hello guys! Today I want to talk about these resources about how to make a layout with self-confidence! It’s supposed to you have basic familiarity with HTML and are comfortable with CSS fundamentals.
Before digging deeper into different layout methods, it’s worth talk regard to normal document flow.
How are elements laid out by default?
The process begins as the boxes of individual elements are laid out in such a way that any padding, border, or margin they happen to have is added to their content. This is what we call the box model.
The usual layout flow is the system by which elements are placed inside the browser’s viewport. By default, block-level elements are laid out in the block flow direction, which is based on the parent’s writing mode (initial: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that’s been specified.
By understanding how inline elements, block elements, and margins behave by default, it’ll be easier to modify their behavior in the future. I will give some examples:
Two commonly used block elements are: <p> and <div>, but there are others, like:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <figcaption>, <figure>, <ol>, <ul>, <nav>....The keys are:
Float
One of the first properties used in layouts structure is Float. It is a CSS positioning property. To understand its purpose and origin, we can look to print design.
Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.
The float property accepts three values, namely left, right and none.
Flexbox
My favorite one is Flexbox because, before that, creating CSS layouts were features like floats (left, right…) and positioning (top, bottom…). We can get by with them, but in some ways, they’re also limiting and frustrating.
If you want to go deeper, I do recommend these links:
- CSS-Tricks Guide to Flexbox — an article explaining everything about Flexbox in a visually appealing way
- Flexbox Froggy — an educational game to learn and better understand the basics of Flexbox
- MDN Web – Flexbox – a topic of learning web development