HTML and CSS Reference
In-Depth Information
Organizing content on the page has always been a challenge in webpage design. The con-
cept of design patterns to separate layout from content/logic has existed for a long time in
other development spaces. However, it has been less readily and easily available in the HTML
space. CSS3 introduces new concepts such as the grid layout and flexbox layout that provide
mechanisms to achieve this proper separation.
This objective covers how to:
■
Implement a layout using a flexible box model
■
Implement a layout using multi-column
■
Implement a layout using position, floating, and exclusions
■
Implement a layout using grid alignment
■
Implement a layout using regions, grouping, and nesting
The flexbox is a CSS3 construct that provides a way to lay out elements that flow.
Flow
means
that the elements will flow from either left to right, also known as horizontal, or up and
down, also known as vertical. In order to begin with a flexbox, you need to create a container
element and give it a name. Use a
<div>
element and name it as shown in this code:
<div id="flexbox1">
</div>
With this code block, you have the beginnings of a flexbox. All that is left to do is to create
the CSS to indicate that the container is indeed a flexbox. The following CSS achieves this:
#flexbox1 {
display: flexbox;
border: 1px solid black;
margin-top: 100px;
min-height: 15px;
}
With that HTML and CSS in place, you can run the page and see a container specified to
have a flexbox layout. The output is shown in Figure 4-34.
Search WWH ::
Custom Search