flexbox

CSS flexbox makes it easier to design responsive websites.

1

2

3

4

5

6

7

The div above uses flexbox layout and a directive to wrap its contents (flexbox-wrap: wrap).

#divflexcontainer1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 3em 3em 1em;
  padding: 1em;
  border: solid .1em purple;
  border-radius: 7px;
}

1

2

3

4

5

6

7

This one has its items shrink in size (those that are flexible) rather than wrap around. This is the default behaviour.

#divflexcontainer2 {
  display: flex;
  justify-content: center;
  margin: 3em 3em 1em;
  padding: 1em;
  border: solid .1em green;
  border-radius: 7px;
}

1

2

3

flexbox using column layout - vertical alignment of elements.

#divflexcontainer3 {
  display: flex;
  flex-direction: column;
  flexbox-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin: 3em 3em 1em;
  padding: 1em;
  border: solid .1em yellow;
  border-radius: 7px;
}