Website design with Flexbox FULL

Admin   HTML5 - CSS   236  2020-10-10 11:12:17

Flexbox is a CSS3 solution born to replace floats. Help us to design website interface easier.
Flexbox is born to be considered the revolution of CSS3 , so if you learn web programming it is impossible not to hold it.

In this article, I will fully guide Flexbox , concepts, terminology, properties as well as examples of how to use flexbox.


Note: In this article there will be examples embedded from Copen.io. Therefore, to see the code, you need to open another tab and go to the Copen.io page (pass captcha) and F5 again this article.

1. Introduction to Flexbox


The Flexbox Layout (Flexible Box) module (As recommended by W3C as of October 2017) aims to provide a more efficient layout, arrangement and delivery of items and space in an even container. when their sizes are dynamic (hence the word 'flex').

The main idea behind the flex layout is to give the container the ability to change the width / height (and order) of the item to fill the available space (mostly to fit all types of display devices. display and screen size).

A flex container expands items to fill the available free space or shrinks them to avoid overflowing.

Most importantly, the flexbox layout has the opposite direction of the regular layout.

While regular layouts still work well for pages, they lack the flexibility to support large or complex applications (especially when it comes to changing orientation, resizing, stretching, shrinking, etc.).

Note: Flexbox layout works best for small elements of the application, while GRID layout is reserved for larger scale layouts.

2. Basic Flexbox Concepts and Terminology


Since flexbox is a module, not a single property, it involves a lot of things including its set of properties.

Some of them are set on the container (the parent element, called ' flex container ') while others are set as children (say ' flex items ').


If the layout of 'normal' based on both volume and user oriented inline flow, the layout of flex-based ' flow direction ' ( flex-flow directions ).

And you can specify the direction of the flow. If not specified then it is the default.

See the following illustration:

Basic Flexbox Concepts and Terminology
Basic Flexbox Concepts and Terminology

 


The items will be arranged according to main axis (from main start to main end ) or perpendicular axis to the main axis - cross axis (from cross start to cross end).

  • main axis  - The main axis of the flex container is the vertical spindle under which the flex item is laid out. Note, it doesn't have to be horizontal. It is specified using the flex-direction property (see below).
  • main start and main end : The flex items are placed in the container starting from main-start and to main-end.
  • main size - the width of the container
  • cross axis - The axis perpendicular to the main axis is called the cross axis. Its direction depends on the spindle direction.
  • cross start and cross end - The start and end points of the flex item in the cross axis direction.
  • cross size - Depends on the width or height of the flex item.

3. The properties of the flexbox


We will learn about each of the Flexbox properties in a moment.
First we will learn about the attributes for the container

3.1. The display property

The display property is used to define a flex container. Inline (inline) or block (block) depending on certain value.
It allows to create a flex context to further align flex items.

.container {
  display: flex; /* or inline-flex */
}


Note that CSS columns have no effect on flex container

3.2. The flex-direction property

The flex-direction property sets the main-axis, thus specifying the direction in which the flex items will be placed in the flex container .

 

The flex-direction property


The flex-direction property


Flexbox is a one-directional layout concept . Understand that flex items will only be placed horizontally or vertically.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Inside:

  • row : Is the default. From left to right
  • row-reverse : Reverse row (From right to left)
  • column : Column (From top to bottom)
  • column-reverse : Reverse column (From bottom to top)

 

3.3. Flex-wrap property

By default, all flex items will try to match one line. You can change that and allow the items to row (split) as needed with this flex-wrap property.


Flex-wrap property

Flex-wrap property
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Inside:

  • nowrap (default): all flex items will be placed on one line
  • wrap : flex item will automatically split lines, top to bottom.
  • wrap-reverse : flex item will split into multiple lines from bottom to top

As in the example below:

  • Red list is set to nowrap
  • The yellow list is set to wrap
  • The yellow list is set to wrap-reverse


Note: flex-direction is set to the default value: row

3.4. The flex-flow property

The flex-flow property is an abbreviation for the flex-direction and flex-wrap properties .
Together it determines the main axis and cross axis of the flex container. The default value is row nowrap .

 
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
 

3.5. The justify-content property

The justify-content property specifies alignment along the main axis.
It helps to adjust the remaining free space when all flex items are on the same line.

 

The justify-content property

The justify-content property

 

It also exercises some control over the alignment of the items as they overflow.
 
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

Inside:
  • flex-start (default): The items are placed in the direction of the start (in the direction of the flex-direction).
  • flex-end : the items are cornered toward the end of the flex-direction.
  • start : The item is placed towards the start of the wirting-mode direction
  • end : The item is placed towards the end of the wirting-mode direction
  • left : items placed to the left, edge of the container.
  • right : the item is placed on the right side of the container.
  • center : put items in the center.
  • space-between : the items are evenly spaced, the first and the last items are placed at the starting and ending point.
  • space-around : The distance between the items is even. But, the first and the last item are only half the distance from the container to each other.
  • space-evenly : The distance between the item and the container is even.

Note that different browsers will support them differently.
For example, space-between never got support from an instance of Edge, and start / end / left / right is not available in Chrome (See MDN for details ).
Safest are the values: flex-start , flex-end, and center .
There are also two additional keywords that you can pair with these values: safe and unsafe .

3.6. The align-item property

 
 
The align-items property

The align-items property


The align-items property defines the default behavior for how flex items are located along the cross axis on the current line.
Think of it as justify-content version but for the cross axis (perpendicular to the main axis).

 
.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch (default): stretch the item to fill the container (still respect min-width / max-width)
  • flex-start / start / self-start : the items are located at the top of the cross axis. The difference between these is in respect of the rules of flex-direction or writing-mode rules.
  • flex-end / end / self-end : the items are located at the end of the cross axis. The difference again is in respect of the rules of flex-direction or writing-mode rules.
  • center : the items are centered on the cross axis
  • baseline : Items that are aligned like their baseline

The keywords safe and unsafe can be used with all the rest (although there are some browsers to be aware of).

3.7. The align-content property

If the justify-content property distributes the space between items on the main axis ...


The align-content property

The align-content property


The align-content property distributes the space between item rows, item rows and container edge ( along the cross axis ).
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Inside:
  • flex-start / start : the rows of items are placed at the top of the container (according to the cross axis). flex-start (more supported) respects flex-direction while start respects writing-mode .
  • flex-end / end : the item rows are located at the end of the container (according to the cross axis). The flex finish (more support) honors the flex direction while the finish honors the writing mode direction.
  • center : the item rows in the middle of the container
  • space-between : evenly distributed item rows. The first line is at the beginning of the container while the last line is at the end of the container.
  • space-around : the rows of items are evenly distributed with equal space around each row. (Top and bottom items still have minimal distance from the edge of the container)
  • space-evenly : the rows of items are evenly distributed with equal space around them. (with container edge)
  • Stretch (default): the rows of items are stretched to fill the gap (along the cross axis).

Next we will learn about how to attribute flex item
 

3.8. Order attribute


Order attribute

Order attribute
 

By default, the flex items are placed in HTML sort order. However, the order attribute  can control the order in which they appear in the flex container.
.item {
  order: <integer>; /* default is 0 */
}

3.9. The flex-grow property



The flex-grow property

The flex-grow property


The flex-grow attribute distributes additional space for items if needed.
It accepts a unit value as a ratio. It shows how much space is available inside the flex container that the item will take up.
If all items with flex-grow are set to 1, then the items will occupy each item 1 part of the container.
If one of the items has a value of 2, then the item will be split by 2 and the other item will be divided by 1 item by part of the container.
.item {
  flex-grow: <number>; /* default 0 */
}
Negative numbers are invalid.

3.10. Flex-shrink properties

The flex-shrink property is used to shrink the item if necessary.
 
.item {
  flex-shrink: <number>; /* default 1 */
}
Negative numbers are invalid.

3.11. The flex-basis property


The flex-basis attribute specifies the default size of an element before the remaining space is distributed.
It can be the length (e.g. 20%, 5rem, etc.) or a keyword.

  • The keyword auto means 'look at the width or height property' (temporarily implemented by main-size until deprecated).
  • The content keyword means' size based on the content of the item - this keyword isn't well supported yet, so it's hard to test and harder to know its max-content, min-content and fit-content. what.
.item {
  flex-basis: <length> | auto; /* default auto */
}
 If set to 0, add space around non-element content. If set to auto, add the space distributed based on flex-grow. See this graphically.

3.12. Flex property

The flex attribute stands for the flex-grow, flex-shrink, and flex-basis properties combination.
The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

You should use this shorthand instead of having to set properties individually. Shorthand intelligently sets other values.

3.13. The align-self property


The align-self property

The align-self property

The align-self property is similar to align-item, but only for a separate item.
See the align-items explanation to understand its values.

 

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}


* Note that float, clear and vertical-align have no effect on a flex item.

4. The example uses flexbox.

Example 1: Perfectly centered with Flexbox

Let's start with a very simple example that deals with almost daily problems: Perfect centering .
There is no simpler way than using flexbox.

CSS:

.parent {
  display: flex; / * Set the flex context * /
  height: 300px; / * Or other size * /
}

.child {
  width: 100px; / * Or other size * /
  height: 100px; / * Or other size * /
  margin: auto; / * Perfectly centered! * /
}

Example 2: Responsive with flexbox

Now let's use some other properties. Consider a list of 6 items, all of which have fixed sizes, but can have automatic sizes.

CSS:

 
.flex-container {
  / * First, create the flex context * /
  display: flex;
  
  / * Then specify the flow direction flex-direction
     and allows separation
   * Remember this is similar:
   * flex-direction: row;
   * flex-wrap: wrap;
   * /
  flex-flow: row wrap;
  
  / * Then we evenly distribute the remaining space * /
  justify-content: space-around;
}

We want them to be evenly distributed across the horizontal axis so that when we resize the browser, everything is scaled nicely without @media.

Example 2: Responsive menu with flexbox

Imagine we have a right-aligned menu at the top of our website.
But we want it to be centered if the screen is medium and single-columned on small devices. It's too easy with the flexbox.


CSS :
/* Big screen*/
.navigation {
  display: flex;
  flex-flow: row wrap;
  / * Align item to the end according to main axis * /
  justify-content: flex-end;
}

/ * Average screen * /
@media all and (max-width: 800px) {
  .navigation {
    / * Align item focus in space-around style * /
    justify-content: space-around;
  }
}

/ * Small screen * /
@media all and (max-width: 500px) {
  .navigation {
    / * Each item is on a row (arranged in a single column) * /
    flex-direction: column;
  }
}
Example 3: Simple responsive website with flexbox

The ultimate goal of using flexbox is good support for responsive website design. So now let's try a responsive design with a simple website layout with flexbox.
CSS:

 
.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/ * We say that all items are 100% width, via flex-basis * /
.wrapper> * {
  flex: 1 100%;
}

/ * We rely on the source order for the mobile-first method
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 * /

/ * Average screen * /
@media all and (min-width: 600px) {
  / * Sidebar is on the same row * /
  .aside {flex: 1 auto; }
}

/* Widescreen */
@media all and (min-width: 800px) {
  / * We reverse the order of the first sidebar and main
   * and says main is twice as wide as the sidebar
   * /
  .main {flex: 2 0px; }
  .aside-1 {order: 1; }
  .main {order: 2; }
  .aside-2 {order: 3; }
  .footer {order: 4; }
}

Summary of Flexbox

So through this article, you have learned thoroughly about Flexbox , the important concepts and properties of flexbox .
Moreover, we also experimented with 4 simple examples of flexbox application .
Mastering the skill of using flexbox, your web design as well as web programming level will increase a lot, easier to breathe.