The CSS Flexible Box Layout module (aka Flexbox) provides a simple solution to many of the design and layout problems web designers and developers have faced since the advent of CSS. Now that the module is becoming ready for the main stage, it’s time to look at what we can do with it.
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see. See more: Advanced Responsive Layouts with CSS Flexbox. For beginners see: CSS: Flexbox First Look.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content
CSS Flex Box Layout
CSS Flex Box Layout is the latest layout model coming to CSS3. It is in the W3C’s Candidate Recommendation (CR) stage. The new flex layout allows elements within a container to be arranged in a way fitting to the screen or device that it is being viewed on. Unlike the block layout mode, the flex layout lacks the functionality of columns and floats. It does, however, allow more flexibility in the layout of the content within the container.
One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to be constrained within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than those, for example, of the block and inline display types, which are generally uni-directional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.
Designate a flex box
Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:
By setting the display to one of the two values above, an element becomes a flex container and its children flex items. Setting the display to flex makes the container a block-level element, while setting the display to inline-flex makes the container an inline-level element.
See More Resources:
Build My Site