Key Words & Phrases
Flex Container
-Parent element in which flex item are located in
Flex item
-The child of a flex container (the parent).
Direction
-Leftwards
-Rightwards
-Downwards
-Upwards
What Are Flexible Box/Flex Box
Flexible Box/Flex Box is a box model optimized for interface design in CSS3. One of the major pros of flexible box/flex box is that floats are not used. Flexible Box/Flex Box is easy to use and powerful tool for distributing space and aligning contents. Using flexible bix/flex box box model flex containers are used this can be considered as the parent. The parent naturally has children; the children are termed as flex item. The flex items have numerous advantages some of these are:
-They can be laid out in any direction
-They can “flex” their size to fill unused or available space
-They can shrink to avoid overflowing the parent (flex container)
-Their style order can be rearranged at the style layer
Implementing the Flex Layout
Implementing the Flexible Box/Flex Box
Set the “display” property to -ms-flexbox (block-level ) or -ms-inline-flexbox (inline)
To set the orientation of the flex-items (children) set property “-ms-flex-direction” to either row or row-reverse or column or column-reverse or inherit.
Creating the Flex Container
Sample Code
7 Responses
[…] 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 […]
[…] CSS3 Flexible Box / FlexBox […]
[…] CSS3 Flexible Box / FlexBox […]
I had to use selectors a bit differently … no space before the # in CSS
Thanks for the guide, gonna to try your snippet in my new layout, just what I have been searching for :)
[…] 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 […]
[…] CSS3 Flexible Box / FlexBox […]