We are now 6 weeks in the ACS training course and our mission this week (should you choose to accept it) is to go back on some of the CSS layout.
« The display property »
The default layout for most elements is block (or block-level element) and inline (or inline element).
The standard block elements are <div>, <p>, and <form> and the HTML5 elements are <header>, <footer> and <section> among others… And they will stretch out to the left and right of the page.
The <a> element is the most common and is used for links. The inline element can wrap out some part of the text inside a paragraph without disrupting the normal flow of that paragraph.
OTHER DISPLAY VALUES
There are plenty such as list-item, inline-block and flex. I will not talk about table.
>List-item or listing lists can be unordered (<ul>) or ordered (<ol>).
>Inline-block elements are like inline elements with possible definition of width and height.
>Flex / flex-boxes… Yeah let’s go fancy now …
First we start by defining a container as flex /*or inline-flex */.
Follows the justification of how the children in this container will behave in terms of location between one another. Use flex-direction: row | row-reverse | column | column-reverse for the arrangement along the main-axis.
By default all the items will try to fit within one line. This can also be changed by flex-wrap: nowwrap (single-line) | wrap | wrap-reverse (both multi-line with different directions).
Short for flex-direction combined with flex-wrap is flex-flow with its default value of row nowrap.
Finally try to make your way through justify-content, align-items and align-content. And yes, these are only for the container.
Properties for the “kids” are left out for the moment but of course would have to be completed as soon as we get a little bit further into the ACS training session…
Items have default displays but these can be overridden. We still have to make sense of it. Making inline li element for horizontal menus is good versus an inline div is not.
« <margin: auto;> »
To prevent the block-level elements to stretch out to the edges of its container to the left and to the right, set the left and right margins to auto. The option auto will also automatically centre the element within its container. Additionally, if a width is specified, the element will take it up and the remaining space around the element will be divided into the two margins.
« <max-width;> »
Use max-width instead of width in case of small windows. The aim is to provide a site that is responsive for different window sizes and suitable for mobile display. All major browsers our days support the option. SEE HERE CAN I USE?
>An element with position static is said not to be positioned in a specific way or even not positioned at all.
>An element with position relative responds like the static position unless properties like width and height for example are specified. Its position will then be adjusted from its normal position and its content will fit in the available space.
>An element with position fixed stays in the same position even if the page is scrolled.
>An element with position absolute is a fixed element relative to the nearest positioned ancestor instead of being relative to the viewport.
>FLOAT is initially intended for wrapping text around images. It is also very common to build entire websites layout using the float only.
Frameworks such as Bootstrap are here to help but we are better off working our way knowing how CSS works… Just in case there is another one of this DDoS attack… Or maybe should we just start learning a new skill like fishing? Take your pick!