Flexible web layout

Background

When we read the content from browser, it would render the content based on CSS basic box model.

However, it needs many items and attributes to control the view, so it is complicated to setup and easy to get messed.

The problems from classic web layouts made web designers just using tricky and weird workaround to avoid.

As a result, W3C suggested using new web layout, flex, to design HTML frontend, that provide an easier all-around solution.

Until now, flex layout has already became a major web layout used for modern web designers and framework.

The new layout is lesser properties to know and also smarter which many attributes are calculated by render engine.

The following is showing all the CSS attributes having in flex web layout, it’s obviously a right layout solution.

Properties

There are the properties contained in flex layout in YAML format.

---
flex-container:
  axis:
    - main start/end(-)
    - cross start/end(|)
  attributes:
    flex-direction: [row, row-reverse, column, column-reverse]
    flex-wrap: [nowrap, wrap, wrap-reverse]
    flex-flow: "${flex-direction} ${flex-wrap}"
    justify-content: [flex-start, flex-end, center, space-between, space-around]
    align-items: [flex-start, flex-end, center, baseline, stretch]
    align-content: [stretch, flex-start, flex-end, center, space-between, space-around]
  flex-item:
    axis:
      - main size(-)
      - cross size(|)
    attributes:
      order: "<integer>"
      flex-grow: "<number>"
      flex-shrink: "<number>"
      flex-basis: "auto | <length>"
      flex: "${flex-grow} ${flex-shrink} ${flex-basis} | auto | none"
      align-self: [auto, flex-start, flex-end, center, baseline, stretch]
---