FLEXBOX
- Flexbox can be used to create responsible layout elements without the use of media queries
- The flex-basis property combined with the ability to nest flex containers allows complicated layouts without the need to changes to the HTML
THE FLEX-DIRECTION PROPERTY
When the display property is set to flex,The default value for the flex-direction is row. This property has number of different settings you can choose from.
By default, Flexbox will align all the flex-items horizontally,dynamically and equally using all of the available horizontal space. This is because of the default value of 1 set by flex-grow.
the value column will rotates the axis of the flex container,90 degree, aligning the flex-items vertically, other value include row-reverse and column reverse. Which are fairly self-explanatory.
FLEX-BASIS
Using the property flex-basis allows you to specify an ideal width. Imagine we have flex-container with six items inside of it. Each just a box with a number inside it. if we set a flex-basis of 500px on each of the flex-items, but the viewpoint would scroll horizontally or the items would wrap onto the next lines.
This isn't what happens-instead the items are spread evenly across the view point. The reason for this is the default value of flex-grow being 0, meaning it cannot get any bigger, and the default value for flex-shrink being 1, meaning that it can shrink.
.flex-container {
display: flex;
}
.flex-item{
flex-grow: 0;
flex-shrink: 1;
flex-basis:500px;
/* or */
flex:0 1 500px;
}
FLEXBOX SIZING
When tge display: flex; property is applied to the parent, the childern of this element will become flex-items. Each of these flex-items will be as wide as its contents, unless the contents are wider than the available space in the flex-container-then, the flex-items will be shrunk in ratio to their original size, calculated as if the flex-container width was infinite.
This is the default behaviour, but can be changed using the shorthand flex property or flex grow, flex shrink and flex-basis properties.
The default values would be written as:
flex-grow: 0; flex-shrink: 1 ; flex basis: auto;
/* or */ flex: 0 1 auto:
Comments
Post a Comment