Responsive Web Design Fundamentals: CSS Flexbox
Responsive web design is the art of adapting the contents on a website to fit different screen sizes without negatively affecting user experience. In this first of a four part series on responsive web design, I will be talking about one of the two main CSS frameworks used for responsive layout, Flexbox.
Flexbox is a one-dimensional layout model used to align and distribute items either as a row or column. The flex box layout follows a parent-child relationship, with the flex container as the parent and the flex items as the children. According to an article by CSS-TRICKS, A Complete Guide to Flexbox, a flex container will expand to fill any available free space or will shrink to prevent overflow. Flexbox contains many properties that are set on either the parent container or the children. First, we will discuss the properties of the parent and then finish with describing the properties of the children.
Parent Properties
Display
The first property that must be set is the display behavior of the container. You may be familiar with the conventional options of block, inline-block, etc. In order to make a container accessible to the flex box features, the display property must be set to flex.
By default, declaring flex on the parent container automatically makes the children flex. This gives the children access to the flex box properties. Any items inside the children elements will not have access to the flex properties unless the children elements, parents to the items, have a display set to flex. The container class has display set to flex, therefore children have access to flex properties, but the child-item class does not.
Flex-Direction
The next property determines the direction of the content layout. The four options are row, column, row-reverse, column-reverse. When an item is set to flex, it automatically defaults to the row layout. In order to change to column you must declare the direction as column. The items inside a flex container are added sequentially next to one another along the main axis. Each item takes up equal space inside the container unless specified. All the content will remain on one row until another property is set, flex-wrap.
Flex-Wrap
Flex-wrap does what its name implies, it wraps the content that is overflowing to a new row. There are three options to choose:
nowrap(default): all flex items will be distributed on one row
wrap: flex items will wrap onto multiple lines sequentially from top (flex item 1) to bottom (last flex item).
wrap-reverse: flex items will wrap onto multiple lines sequentially from bottom (last flex item) to the top (flex item 1).
Flex-Flow
Flex-flow is a shorthand property for flex-direction and flex-wrap properties. The default value is row and nowrap.
Justify-Content
This property controls the alignment along the main axis. Justify-content manages the free space around the items inside the container. The space-around, space-between, and space-evenly options are a great for aligning the items without using padding or margins. The options for this property are as follows:
Align-Items
This property defines the alignment for how the flex items are positioned along the cross axis. The default is stretch which is why the items will expand along the cross axis to take up as much space as they can. To override this behavior, set a fixed height on the flex item or use the align-items property to be set to an option such as flex-start.
Align-Content
The final property distributes space around and between the flex items along the cross axis, given there is free space. When initially declaring a container flex, all items will eventually over flow unless the flex-wrap property is set to wrap. This will cause the items to wrap onto the next row. By default, the items in the first row are aligned at the top of the container, the start of the cross axis. The gap between each row is the same spacing as the gap between each item. Align-content behaves in the same manner for the cross axis as the justify-content property does for the main axis.
Basically, the property defines how far apart the rows are separated from each other as well as how far along the cross axis the top row starts. This property only works when the flex container (parent) has the flex-wrap property set to wrap. Another important note, if the flex items are taking all available space along the cross axis, you will not be able to see the effect of the align-content property. The options for this property are:
A final note on the gap space between the flex items and rows/columns. Flexbox has a property conveniently called gap. You can explicitly set the gap for the row or column using this property. The convention for this property is gap: row gap column gap. Example: gap: 30px 10px. Providing only one number will set the gap for both the column and row.
Child Properties
Order
As mentioned before, each flex item is laid out in a sequential order. In order to change the order of any item, just call the order property.
Align-Self
The flex-item has control over how it is aligned along the cross axis. This property will override the default alignment set upon it. For example, if the parent container declares the align-items: flex-start, all items will be positioned at the start of the cross axis. One item sets align-self: center, will cause that item to be shifted to the center.
Flex-Grow
Flex-grow property allows a flex-item to grow in proportion to other flex items. This property dictates how much space a flex item should take up. Declaring a flex item with a flex-grow: 1 will cause the item to expand, taking up as much space as it can. If all flex items have a flex-grow of 1, they will be distributed equally among the available space. If one of the items flex-grow changes to 2, then that item will grow twice as fast as the others, taking up twice the space.
Flex-Shrink
This property determines how much a flex item will shrink relative to the other items. As the parent container collapses, the amount of space the flex item takes up is twice as less as the other flex items.
Flex-Basis
This sets the default size of the flex item before any of the other space is distributed among the other flex items. This property can take values that determine length such as percentages, em, rem, etc. The other option is the keyword auto, which will look at the width and height properties declared on the item.
Flex
This property is shorthand for the flex-grow, flex-shrink, and flex-basis. The flex property is recommended over using the individual properties, as it will adjust the flex item accordingly. The parameters are in the following order, flex: flex-grow flex-shrink flex-basis. If the flex property is set with a single number, this will set the flex-grow to that number and change the flex-shrink to 1 and flex-basis to 0.
Conclusion
This concludes the introduction to the CSS Flexbox. Flexbox is a great option for laying out items that align and move to fit different screen sizes. This may be a good option for small scale applications, but as the complexity of the website or application grows, using another responsive framework, CSS Grid, will prove to be a better option.