04 CSS Flex Box

Flex Box display: flex; makes it easy to distribute elements within a containing element, — either as a row or as a column. Flex box aligns both the elements and the space within a parent container. This happens even when the parent ’ or children’s size are unknown or dynamic. The child items’ width, height, and order can be set to best fill the space that they take up.  

Flexbox is good at taking a bunch of different sized things, and returning the most readable layout for those things. It avoids squishing a big thing into a small column, and leaving big gaps round a small thing. If you want to control the size of your columns precisely, use Grid.

Flex box Terminology

flex layout description images from W3
The various directions and sizing terms as applied to a row flex container. from w3.org. To be direction agnostic, the terms start and end are used.

Flexbox Container (parent)

Controls to set the flexbox container. For quick reference use the Illustrated Flexbox Cheat Sheet.

Display

Initiate the parent as flex container. The container can be a block display: flex;or inline display: inline-flex .

Only the direct children of the parent flex container are effected.

Flex Direction

The flex container has a main axis, either horizontal or vertical, the primary direction along with flex items are laid out.

Use flex-direction: horizontal; or flex-direction: horizontal-reverse; to specify the main direction as horizontal, from left to right or right to left.

Use flex-direction: vertical; or flex-direction: vertical-reverse; to specify the main direction as vertical, from left to right or right to left.

The numbers in the demo reverse when the direction is reversed.

Justify Content

Content is justified by setting the justify-content: property to the following values: flex-start, center, flex-end, space-between and space-around.

The values space between collapses the padding between the flex container and the first and last item while space-around adds some padding.

Flex Box Demo

CSS Code View

Live Demo

  • 1
  • 2
  • 3

Using Margin: Auto

Using margin: auto creates automatic space that allows for useful relationships, like in a menu along the main axis, where some menu items are on the left, and others are on the left. Insert a margin: auto and the content splits to the end of the main axis leading a gap in the middle.

Activate the demo by removing the /* from the CSS rule below that targets the third column of the demo above and witness the power of margin: auto to push children around in the flex box parent. Change the target to the second or first columns to see the content rearrange.

CSS Code View

Flex-Wrap

Flex does not automatically wrap its children into multiple lines within the container. If there are too many flex-items, they will extend beyond the flex container’s boundary. Wrapping the flex items will wrap them into multiple lines below (or above with wrap-reverse). The demonstration below uses the setting from the previous demo.

Cross Axis Flex Item Align

The cross axis is perpendicular to the main axis. Flex items can be aligned at the start, center or end, or can span the axis.

CSS Code View

Live Demo

  • content
  • more
  • content
  • less
  • content
  • enough
  • content

Flexbox Item (children)

The flexbox items (children) are all the elements that are direct children of the flexbox container, and they can be controlled independently from the flexbox container controls. It is possible to align, order, and determine the proportional size of any of the flex items. This has been made into a separate module that also works for CSS Grid item control.

Order

The display order of the flex items follows the order in which the HTML is written. That can be changed by specifying how many items forward or backward the flex item is to move.

Align

Align flex item can be applied to any element. Here the third flex-item is flex-end , where the others are flex-start . Put them all on stretch, and you have the perfect equally long shaded columns. That is the aim of the Holy Grail Layout below.

Proportion

Width of the boxes can be determined proportionally and is specified for each flex-item by the flexproperty.

CSS Code View

Live Demo

1

Different amount of text in these boxes shows how the cross-axis align function works. There is control for how the boxes align or stretch to all be the same hight no matter how little or how much content. The flex value for this box is 3. Remove the align self and set the align items to stretch and all the flex items will span the cross axis.

2

Box 2 has not as much text as box 1 but more than box 3. The flex value for this box is 2 and order is -1 which places it before box 1.

3

Flex value for box 3 is 1 and it’s self-aligned.

Flex Grow, Shrink, and Basis

Rather than specify a fixed ratio between the flex elements, the proportion can be given parameters by the Flex Layout Algorithm and the fit is dynamically determined. This is because the default is flex-shrink: 1, meaning that each element will shrink such that all elements fit in the parent. Change the default value to 0 and all the magic of flexbox disappears, as the flex items will grow beyond the parent. Flexbox is set up to automatically fit the content within the parent. The fit of the flex-items to the remaining space, or lack of space is determined against a reference basis width using grow, shrink and basis controls.

Grow

The Flex layout Algorithm defines the ability for a flex item to grow, starting from the basis number, if the content requires it (when the parent’s width expands). It calculates the proportion for each flex item inside the flex container. Flex growth is the amount a flex item can grow in proportion to the other flex items. If all items have flex-grow set to 1, every child will have an equal potential to expand if their content requires it. If one of the children has a value of 2, that child would take up twice the growth as the others.

Shrink

Flex-shrink does the opposite, with a higher number defining how much greater the shrinkage of an item (when the parent’s width shrinks). In the following example, watch what happens when you cut the width of the parent flex box by 50%. The box with the highest flex-shrink number shrinks the most.

Basis

Flex-basis is the starting or default size of an element before the remaining space (shrink or expand) is distributed. The default is auto. Any value for width or height properties are accepted. If using 0 use units to avoid being interpreted as a flexibility.

settings

The flex property may use up to three values.

If there is only one value a number without units is interpreted as flex-grow or with a unit as flex-basis. You can also use the keywords none, auto or initial.

If there are two values the first value must be a number without units and is flex-grow. If the second number is without units it is flex-shrink or if it has units it is flex-basis.

If there are three values the first is flex-grow, the second is flex-shrink, both without units, and the third has units and is the flex-basis or the value auto.

In auto the item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. Auto is flex: 1 1 auto.

Initial is the default value. The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. Initial is flex: 0 1 auto.

In none the item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. None is flex: 0 0 auto.

By default flex items don’t shrink below their minimum content size. To change this, set the item’s min-width or min-height.

The demo evaluates the content and proportions the boxes automatically according to content shrink from 50% and grow to 150%. Flex box item number, the red box, will expand and shrink more than the others.

CSS Code View

Live Demo

Different amount of texts in these boxes shows how the cross-axis align function works as there is control of how the boxes align or stretch to all be the same hight no matter how little content. The flex value for this box is 1 0 8rem.
When there is not much text but more than in the last row. The flex value for this box is 1 0 6rem.
The flex value for this box is 1.5 0 5rem.

Page Layout Demonstration

Once upon a time, a very long time ago, there was a Holy Grail Layout with a three column body, a header and footer. This was accomplished without tables. This was long before mobile changed everything so the layout was not even responsive. How the times have changed. A responsive Holly Grail, so when the viewport shrinks the columns stack.

06 Web Typography

The web changed completely when it comes to typography. For the first twenty years we could specify only a few fonts. There were 18 fonts to use in 2008. The core fonts licensed by Microsoft are: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Apple added Helvetica and Times. That was it. By 2010, there were thousands of fonts available. What a change. Since then they introduced open type variable fonts.

While typography’s been around for hundreds of years, it’s only been in the last hundred years or so that it became both art and science. The art and science of typography forced typographers to ply their craft in the service of the end user who reads it. That makes them the original user experience designers, so take heed.

The web is different from print. The user is in charge in a way that is foreign to print. The attention span is different, and the typography should facilitate the user experience as soon as they arrive on the page. The typographic defaults that taken for granted took their shape from the years of experience in the print world. Do not blindly accept these defaults by which to express your content on the web. The web is different from print.

You will be required to deviate from the standard web fonts like Arial, Helvetica, Verdana and Georgia in the final. These are common fonts supplied by the operating system that have defined typography on the web for far too long. They are safe, legible and entirely predictable. It is possible that legibility may suffer in favor of better expression of the content. It’s a brave new world. Please push the typography if you can. It has been documented that legibility isn’t all that its been cracked up to be when it comes to retaining information.

On the one hand, the legibility of a typeface is its invisibility, that is, just like the cuts in a movie and they are not supposed to draw attention to themselves but convey the content in service to the story. The typeface and the way it is laid out should transparently facilitate the content to the user, whose focus, after all, is on what is being said. But if you want the delivery of the content to express something, it better have style. It’s possible to do both, and in the name of communication, even if you forgo some legibility, I encourage you to do so for the sake of communication, if that is what it takes.

Adobe added in access to all of the open type features exhibited in the following demo of comprehensive CSS font-feature-settings .

For the love of type, explore what’s possible

    

David Carson famously did this twenty years ago, designing, among other things, covers for HOW magazine which I was writing for. If we need an expanded vision to counterbalance all of the rules, we can visit his work, with the understanding that rules are meant to be broken, with intelligence and purpose, and if the content demands it.

Honor the content with your typography, so that it aids in the facilitation of that content. After all, it is only through reading the letterforms that the content can be transmitted. As a designer, you have the power to determine that gateway.

Balance function and beauty, or whatever emotion grabs you to fulfill that function with style. Be playful, lively, think your way through the problem but let the solution be surprising, and just have fun! Having fun is contagious, and if you exhibit joyful creation, it is bound to be infectious.

Here’re two spreads on intuition from David Carson’s 2nd Sight, his influential book on graphic design after the end of print. There is a TED talk and another one of his creations in the homework. Let that get you started.

David Carson from 2nd Sight

The Fundamental Skill of a designer is talent. Talent is a rare commodity. It’s all intuition. And you can’t teach intuition. — Paul Rand
David Carson from 2nd Sight
Intuition doesn’t look at things as they are: that is prison, that is anathema to the intuitive. He looks, oh, so ever so shortly at things as they are and moves off into an unconscious process, at the end of which he has seen something nobody else would have seen — C.G. Jung