The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
The flex-direction property defines in which direction the container wants to stack the flex items.
The flex-wrap property specifies whether the flex items should wrap or not.
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
The justify-content property is used to align the flex items:
The align-items property is used to align the flex items.
The align-content property is used to align the flex lines.
The order property specifies the order of the flex items. The first flex item in the code does not have to appear as the first item in the layout.
The order value must be a number, default value is 0.
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
The flex-basis property specifies the initial length of a flex item.
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals with layout in one dimension at a time - either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.
#csstamil #css #css3 #cssintamil #cssbasics #cssflexbox#csslayout #csstutorials #webtechnologies
🔔Like, Subscribe My Channel👍
/ @programmingtutortamil...