Posted on: 08.09.2020 Posted by: Alex D Comments: 0

See how Flexbox works in CSS on GIF images.

Create a DIV container. Place 4 DIV blocks inside the container.

<DIV id='container'>
  <DIV>1</DIV>
  <DIV>2</DIV>
  <DIV>3</DIV>
  <DIV>4</DIV>
</DIV>

Make the CSS property of the container display: block.

#container {
  display: block;
}

CSS property display: flex

Now make the CSS property of the container display: flex.

#container {
  display: flex;
}

CSS property flex-wrap: wrap

Do you want to allow blocks to jump to the second and third lines? Use the CSS property of the flex-wrap: wrap container.

#container {
  display: flex;
  flex-wrap: wrap;
}

CSS property justify-content

You can align the blocks with the container. Use the container’s justify-content CSS property.

#container {
  display: flex;
  justify-content: space-around;
  /* flex-start; flex-end; center; space-between; space-around; */
}

CSS property flex-direction

You can make a column of blocks vertically. Use the container’s flex-direction CSS property.

#container {
  display: flex;
  flex-direction: column;
  /* column; row; center; row-reverse; column-reverse; */
}

CSS property align-items

You can align the blocks with each other. Use the container’s CSS property align-items.

#container {
  display: flex;
  align-items: center;
  /* flex-start; flex-end; center; stretch; baseline; */
}

Example mobile menu

An example of a menu for the desktop and mobile versions of the site.

<STYLE>
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
#container div {
  margin: 5px 10px;
  padding: 10px 20px;  
}
#container div:hover {
  background-color: green;
  color: white;
}
</STYLE>
<DIV id="container">
  <DIV>Link 1</DIV>
  <DIV>Link 2</DIV>
  <DIV>Link 3</DIV>
  <DIV>Link 4</DIV>
  <DIV>Link 5</DIV>
  <DIV>Link 6</DIV>
  <DIV>Link 7</DIV>
  <DIV>Link 8</DIV>
  <DIV>Link 9</DIV>
  <DIV>Link 10</DIV>
</DIV>

DEMO

Categories:

Leave a Comment