Styling and Using Flex

In an earlier example the float property was used to create a calendar month. This example shows that the flex property can be used for this. This demonstration includes a second week to show how to begin on the left again with flex.

1
2
3
4
5
6
7
8
9
10
11
12
13

The style to produce the above is:
.calendar {display: flex; flex-wrap: nowrap; background-color: transparent;}
.calendar > div {background-color: #f1f1f1; width: 100px; min-width: 1.6em;margin: 0; text-align: center;
line-height: 75px; font-size: 30px; border: 1px solid LightBlue;} "Calendar > div" means that "calendar" is the parent element of "div". Note that the width is specified as 100px but that each box can shrink down to 1.6em if it needs to do so to fit.

The HTML code to use the style is:
<div class= "calendar">
<div></div> (empty box)
<div> 1</div>
<div> 2</div>
<div> 3</div>
<div> 4</div>
<div> 5</div>
<div> 6</div>
</div> Close the div for the first week.
<div class= "calendar"> Open the div for the second week.
<div> 7</div>
<div> 8</div>
<div> 9</div>
<div> 10</div>
<div> 11</div>
<div> 12</div>
<div> 13</div>
</div>

What would happen if the screen size was shrunk, if perhaps this was seen on a smart phone? In this case the width of each box would shrink from the specified 100px until it reached the minimum width of 1.6em. If the width of each box had not been allowed to shrink, some of the calendar boxes would not have been visible. In the boxes below, the style specifies a fixed width, and the flex property has been changed from "nowrap" to "wrap".

The style to produce the above is:
.testbox {display: flex; flex-wrap: wrap; background-color: transparent;}
.testbox > div {background-color: transparent; width: 100px; margin: 0; text-align: center;
line-height: 75px; font-size: 30px; border: none;}.

The HTML for this section is no different from that for the first with the exception that the boxes are now occupied by images instead of numbers; however, Flex-wrap is now given the value of wrap, meaning that boxes can drop down to a different line if there is not space on the current line. The width is still 100px for each box, and there is no minimum width to let the box shrink

I recognize that the images displayed here are too small to see any details (or even recognize the dogs). A later example will use this display to show and explain another element that increases the size of the images when the cursor is held over them.

Another way to get the images in a row as they are here is to use the figure element. These images can be increased in size as addressed in the previous paragraph. The figure element designed is to place a caption (an image title or descriptive words)with the image, and this would be extremely challenging when the figure element is used as it is here. Note that there is a small space between each image with use of figure element. This example ]was presented just to show differing ways of getting the same result.

No extra styling is required to produce the images with figure, and the HTML is:
<figure>
<img src= "CasparR.jpg" width= "100px;">
<img src= "Mina2.jpg" width= "100px;">
<img src= "Gale2.jpg" width= "100px;">
<img src= "studer.jpg" width= "100px;">
<img src= "Bud&Petey.jpg" width= "100px;">
<img src= "dogbowl2.gif" width= "100px;">
<img src= "Meisje2.jpg" width= "100px;">
</figure>