CSS — DISPLAY & FLEXBOX
Flexing New Design Skills
Cascading Style Sheets (CSS) determine how HTML elements will be displayed on the screen. Most elements are either displayed as a block or inline. Elements like div, header, footer, main, h1….h6, p tags, etc. are block elements. These elements will have whitespace above and below them, and will not have elements next to them in either direction. Block elements start on new lines and take up the full width of either the page (if they are the parent element) or of the container that they are wrapped by. Elements like strong, span, a tags, img tags, etc. are inline elements. Inline elements will be displayed inside a block, and can start anywhere in a line, for example next to other inline elements. They don’t necessarily start on a new line and inline elements only take up their needed width/space.
If HTML elements are ordered from ‘parents’ to → ‘children’, in reference to the display property, it is important that the parent element, more precisely in CSS known as the ‘container’, make the declaration for how the child elements will be displayed. In the stylesheet, the container element will declare the display property. There are a few different values that the display property could be formatted as, but an extremely important property for first steps in responsive design is display: flex;
When flex is chosen as the value of our parent’s display property, we have an easier way to layout, align and distribute space between elements within our block. The Flexbox model will include a flex container and flex items. In our CSS Stylesheet, we will use the selector of the classname of our parent element to determine that the display of the items our flex-container wraps will have the ability to be altered to best fit the space of the container. An important feature of flexbox is that it allows our elements to become ‘direction-agnostic’¹. Where block elements are vertical and inline elements are horizontal, flex element orientations are based around the needs of the containers design. By declaring values on other flexbox properties (see image below), also set in the containers style declaration, our items can now be arranged in rows right to left or left to right, columns top to bottom or bottom to top…all dependent on the layout desired and the declared size of the container.
While justify-content arranges items horizontally, align-items job is to arrange elements vertically.
These are two great sites for learning more about flexbox and how important flex, and the properties that work along with it, are for designing your content:
