Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Although we've been relying on CSS to control page layout for quite some time now, the existing tools for layout aren't as powerful or as easy to use as we'd like. That's one of the reasons that I am excited about the new flexible box layout module. The new flexible box module, or FlexBox as some have termed it, gives us an alternate choice for controlling page layout. It is based off of XUL, an XML-based layout standard, and has been used for some time by Mozilla and Apple in various platforms.
Its origins are found in interface design and as its name suggests, it's well-suited for controlling the layout of HTML-based applications and interfaces, especially those that need to work on various devices and screen sizes. It works by allowing you to determine how child elements should be laid out within a parent element, either vertically or horizontally. To make it easier to create flexible layouts, the available space can be assigned evenly among children or assigned to a particular child or grouping of children.
These flexible groups can then be nested inside of each other to create more complex structures. Before you begin to experiment with the flexible box model, let's take a look at some of the highlights of the specification. To use the flexible box model, you first assign a display property of box to the parent element. This will enable FlexBox control for all child elements. You can also specify inline-box to enable box positioning for inline level elements. Once you've established a parent element as a box, you have a total of eight properties to help you control the layout of your child elements.
These are box-align, box-direction, box-flex, box-flex-group, box-lines, box-ordinal-group, box-orient and box-pack. Let's take a closer look at a few of these properties and what they will allow you to do. The box-orient property allows you to choose how child elements are arranged within the parent. Horizontal will arrange children horizontally within the parent element, while vertical will stack elements vertically.
To control the sizing of child elements, you can use the box-flex property. A good way to think of box-flex is as a way to establish a sizing ratio for children. Any value over zero makes a box element flexible. Flexible elements will expand when extra space is available within the parent and they will shrink when space is reduced. How much space an element occupies is based on the value of the flex property itself. An element with a value of two, for example, is twice as flexible as an element with a value of one and would take up twice the available space.
This is an easy way to establish sizing relationships without having to calculate values. Keep in mind that not all child elements need to be flexible in order for this property to work. If one element has a fixed width and two other elements are set to be flexible, the flexible elements widths would be determined by using the space left over after accounting for the fixed element. To control the alignment of child elements, you can use the box-align and the box-pack properties.
The box-align property controls how elements are aligned perpendicular to the orientation. Perhaps a clear way of saying that is that for vertically oriented children, box-align will control their horizontal alignment, while for horizontally aligned children, box-align will control their vertical alignment. Box-pack is the opposite of box-align, and it will control the alignment of the elements based on their orientation. Each property provides the ability to align elements to the top or bottom, left or right, center or evenly spaced within the parent.
Flex-box also gives you control over the display order of children as well. The box direction property allows you to either allow children to display normally or to reverse their direction within the parent. The box-ordinal group property allows you to assign display order values to child elements. This can be used to group elements together or to assign individual display orders. The properties whether used separately or combined together give you an amazing amount of control over how children are distributed within their parents.
Support for the flexible box model is currently limited to Mozilla and WebKit-based browsers. As experimental properties, you must use vendor prefixes to use them. There are also implementation differences within the browsers themselves. So I would definitely keep the FlexBox model in the experimental category, at least for the time being.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.