Flexible boxes, or flexbox, is a new layout mode in CSS3. The usage of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents. Some terms might be confusing: the x and y axis are called main and cross axis and the width is called main size, while height is called cross size...
Flexbox consists of flex containers (parent) and flex items (children). A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline). Inside a flex container there is one or more flex items. Flexbox defines how flex items are laid out inside a flex container. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container. The following example shows three flex items positioned by default along the horizontal flex line, from left to right:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> <p>The flex-items are rendered by default with Item #1 at the left.</p> </body> |
flex item 1
flex item 2
flex item 3
The flex-items are rendered by default with Item #1 at the left. |
Note: The flex container, flex items and the content are rendered by default in the flex-direction: row; format. (More about flex-direction in a couple of pages).
