Also, the developers have to combine HTML and CSS to enlarge, shrink, resize, move, or hide website content according to the screen size of the device. They can even take advantage of various CSS3 layout modes – block, inline, table, positioned, grid, and flexbox – to arrange web page elements more effectively. As a new CSS3 layout mode, flexible box or flexbox makes it easier for programmers to change the height and width of web page elements according to screen size and display of each device. The developers can further simplify responsive web application development by availing various features and properties of flexbox.
Each flexbox layout consists of two important components – flex container and flex items. The flex container acts as a container for flex items. It holds multiple flex items, and lay out them along the main axis. The flexbox model defines how the flex items will be laid out inside the flex container. The developers have option to layout the flex container either vertically or horizontally. Likewise, they can enlarge or shrink the flex items according to the unused space in the container. While designing complex layout, the web designers can further nest multiple flex containers with varying orientation. They also have option to avail several features of flex container and flex items.
Understanding Important Properties of Flex Container and Flex Items
The property defines the direction of flex items inside flex container. The default value of flex-direction property is rows which will lay out the flex items horizontally. But the developers have option to change the default value to column, row-reverse, or column-reverse. Column will lay out the flex items vertically. On the other hand, row-reverse and column reverse will reverse the writing order or mode.
As the name depicts, the property specifies if the flex item will be wrapped or not. The developers can take advantage of the flex-wrap property to wrap the flex items when the space in a single flex line in inadequate. The default value of the flex-wrap property is nowrap. However, the developers have option to change the default value to wrap or wrap- reverse. If the value is nowrap, the flex items will not be wrapped. But the flex items will be wrapped if the value is wrap and there is inadequate space in the flex line. On the other hand, wrap- reverse will wrap the flex items in reverse order.
The flex-flow property is designed as a shorthand property for flex-direction and flex-wrap. The developers can use the flex-flow property to define the direction of the flex elements. Also, they can use the property to specify if the flex items will be wrapped or not. The default value of the property is row nowrap. But the developers have option to change the default value according to the direction and wrapping of flex elements.
The property aligns the flex items horizontally when they do not use all space available on the main axis. The default value of the justify-content property is flex-start which aligns the flex items at the beginning of the flex container. However, the developers can change the default value to flex-end, center, space-between, and space-around.
The property aligns all items inside flex container vertically when the flex items do not use the space on the cross axis fully. The default value of the align-items property is stretch which stretches the flex items to fit the container. However, the developers can change the default value of align-items property to flex-start, flex-end, center, or baseline. Flex-start will position the flex items at the top of the container, whereas flex-end will position the items at the bottom of the container. On the other hand, center will position the items vertically at the center of the container, and baseline will position the items at the baseline of the container.
The align-content item is almost identical to the align-items property. But align-content, unlike align-items, does not position the flex items. The developers can use the align-content property to align the flex lines instead of flex items. The default value of the property is stretch which stretches the flex line till it occupies the remaining space. However, the developers have option to change the default value to flex-start, flex-end, center, space-between, or space-around. Flex-start will pack the baseline towards beginning of the container, while flex-end will pack the lines towards the end of the container and center will pack the baseline towards the center of the flex container. At the same time, space-between and space-around will distribute the baselines evenly throughout the flex container.
Flex Item Properties
The web application programmers also have option to use various properties of a flex item – order, margin, flex and align-self. Some of these properties even allow developers to override the alignment or position of the flex item set through the properties of flex container. At the same time, the developers can use order property to specify order of a flex item and margin property to push the items in varying directions. Likewise, they can use the flex property to specify the length of a flex items relatively to other flex items hold by the same container.
The flexbox specifications are being updated on a regular basis. Hence, it becomes essential for web developers to use the current 2015 spec. Also, the 2015 spec is supported by major web browsers. Hence, the developers can use the latest flexbox spec to create a variety of responsive web applications efficiently. They can even take advantage of the flexbox model to make various elements of a web page behave predictably while the page layout keep changing according to the screen size and display of the underlying device.