HTML and CSS Reference
In-Depth Information
At the time of writing none of the approaches in this section are suitable
for use on a public website because support is just too spotty. You may be
able to make use of them in a tightly controlled environment such as an
intranet, a web view in an iOS or Android app, or a Windows 8 Metro app.
Using flexible boxes for nested layout
Flexible boxes
, commonly referred to as
flexboxes
, are a layout
approached developed in Firefox to be used for laying out various ele-
ments of the user interface. They're primarily aimed at creating menus
and toolbars, particularly toolbars made up of nested elements. Cur-
rently Chrome, Firefox,
IE10
, and Safari have some support for flex-
boxes; you'll need to add the relevant prefix to get the listings in this
section working.
This section first gives you a quick introduction to flexboxes using this
simple markup fragment, and then looks at practical use cases and
issues:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
To produce five equal-size boxes,
set the parent element to
display:
box
and set equal
box-flex
values
on the child elements:
div {
width: 90%;
display: box;
}
div div {
box-flex: 1;
}
