Creating responsive inputs and labels provides you with in-depth training on Web. Taught by James Williamson as part of the Building Responsive Forms with Flexbox. Also, see my previous post: What is Flexbox?
The CSS3 Flexible Box Model, or Flexbox, is a different way to design responsive websites and HTML forms. Flexbox doesn’t rely on floats or collapsible margins. Instead, flex containers shrink and expand items to fit the available space. With flexbox, complex layouts can be achieved with cleaner, more semantic code.
In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.
Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.
Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group., and four of these have been published as formal recommendations:
Some modules have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.
Following are a few terms associated with the flex layout model:
Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.
Any child element held within the flex container in considered a flex item. Any text within the container element is wrapped in an unknown flex item.
Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.
Establishes main axis.
Determines how content gets placed on the main axis on the current line.
Determines the default for how content gets placed on the cross axis on the current line.
Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.
The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.
Places elements in groups and determines which order they are to be placed in within the container.
Shorthands flex-direction and flex-wrap to place the flex content.
Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.
Main size and cross size are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.
See more resources:
Build My Site