CSS FlexboxCSS3 Flexible boxes also known as CSS Flexbox, is a new layout mode in CSS3. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container. It is mainly used to make CSS3 capable to change its item?s width and height to best fit for all available spaces. It is preferred over block model. The CSS3 flexbox contains flex containers and flex items. Flex container:The flex container specifies the properties of the parent. It is declared by setting the display property of an element to either flex or inline-flex. Flex items:The flex items specify properties of the children. There may be one or more flex items inside a flex container. Note:Flexbox specifies how flex items are set inside a flex container. It sets the flex items inside a flex container along a flex line. By default, there is only one flex line per flex container. Everything outside a flex container and inside a flex item is considered as usual. Let's take an example to show three flex items within a flex container. By default, they are set along the horizontal flex line, from left to right: See this example: You can also change the direction of the flex line by using direction property. If you want to set the direction line right-to-left then set direction property to rtl. See this example: CSS3 Flexbox PropertiesFollowing is a list of CSS3 Flexbox properties:
Supporting Browsers
Next TopicFlex Direction Property
|