HTML and CSS Reference
In-Depth Information
FIGURE 8-9 The SnapMe application in filled mode.
As you can see, all blocks within the flexible container are listed horizontally and fit nicely into the
available space. If you display the application in full-screen landscape mode, the container will extend
for the entire width and excess space is allotted at the end of the row. This is due to the -ms-flex-align
setting of start .
Figure 8-10, instead, provides a view of the application when snapped to the left edge. The
available space is now too small to fit multiple blocks on the same row. The result is that elements
flow vertically. Should you have an element too large to fit the 320 pixel size, then you have two
options: accept the excess content to be cropped or make the flexible container scrollable. You can do
that by adding the following style to the flexible container.
.flexible-container {
overflow: scroll;
Note that this setting was already included in the code you added to the default.css file earlier in
the exercise.
Search WWH ::

Custom Search