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>
Categories: