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
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;
Search WWH ::

Custom Search