Results 1 - 15 of 15

CSS Flexible Box Layout

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
CSS CSS Flexible Boxes CSS Reference Overview

flex

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.
CSS CSS Flexible Boxes CSS Property Reference

flex-direction

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
CSS CSS Flexible Boxes CSS Property Reference

flex-flow

The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap individual properties.
CSS CSS Flexible Boxes CSS Property Reference

flex-wrap

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.
CSS CSS Flexible Boxes CSS Property Reference

justify-content

The CSS justify-content property defines how the browser distributes space between and around flex items along the main-axis of their container.
CSS CSS Flexible Boxes CSS Property Reference

order

The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
CSS CSS Flexible Boxes CSS Property Reference

align-content

The CSS align-content property aligns a flex container's lines within the flex container when there is extra space on the cross-axis.
CSS CSS Flexible Boxes CSS Property NeedsMobileBrowserCompatibility Reference

align-items

The CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction.
CSS CSS Flexible Boxes CSS Property NeedsExample Reference

align-self

The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored.
CSS CSS Flexible Boxes CSS Property NeedsExample NeedsMobileBrowserCompatibility Reference

Using CSS Flexible Boxes

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the 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.
#RWD Advanced Boxes CSS Example Flexible Guide Web

Using flexbox to lay out web applications

Using flexbox can help you design compelling layouts in web applications that scale better from desktop to mobile. Put an end to floating <div> elements, absolute positioning, and JavaScript hacks, and start building horizontal and vertical flowing layouts in just a few lines of CSS. Some basic example use cases:
Advanced CSS CSS Flexible Boxes Example Guide Web

flex-basis

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.
CSS CSS Flexible Boxes CSS Property NeedsMobileBrowserCompatibility Reference

flex-grow

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.
CSS CSS Flexible Boxes CSS Property NeedsContent Reference

flex-shrink

The flex-shrink CSS property specifies the flex shrink factor of a flex item.
CSS CSS Flexible Boxes CSS Property NeedsContent Reference