Resource Flex Layout 1

Flex is described as an efficent way to lay out and align space with other items in the container. Flex layout gives the container the ability to change the items width and height to fill the available space to the best of its abilities. A flex container needs to be able to get larger or smaller to fill the space that is available. With flex there are many different properties, such as flex container, flex items, flex flow, etc. Flex container is defined by using the flex and inline-flex values of the display property from the parent item. A flex-item is known as the elements direct children from the flex container all become flex items. Flex-flow is a CSS property that determines the direction of a flex container and its wrapping.

Resource Flex Layout 2

Flex is defined as a CSS property that sets how a flex item will get bigger or smaller to fit the space that is availiable in the flex container. There are many different flex properties such as flex-grow, flex-shrink, or flex-basis. Flex-grow is a CSS property that creates the flex grow factor of the flex items main size. The main size can either be the width or the height of an item that depends on the flex-direction value. The flex direction determines how flex items are put in the flex container which creates the main axis and the direction which can be normal or reversed. Flex shrink is a CSS property that determines the flex shrink factor. Therefore if the size of all of the flex items are larger than the flex container, items will shrink to fit into the container. Flex-basis is a CSS property that creates the initial main size of a flex item and it sets the size of the content box.

Resource Flex Layout 3

Flex is a shorthand property for many different properties. One of which is called the flex-basis property, the flex-basis property is the first length of the flexible item. Flex-flow is another property that flex uses, flex-flow is shorthand for flex-direction and flex-wrap properties which determines the main and cross axes of the flex container. Flex-wrap is a property that determines whether flexible items should be able to wrap or not be able to wrap.

Summary

With flex there are many different important things to know with using flex and all of the properties included. Flex-containers which are the parent element and flex-items that are the children are very common and important to know how it works. Additionally, it is important to remember that if the items are not flexible items then the flex property will do nothing and have no effect on the elements.