Loading Please Wait...
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure.
The flex box is basically a flex container with flex children (items). Flex box model provides various properties to layout flex items.
The CSS display: flex; or display: inline-flex; property defines a flex container.
flex-container{
display: flex | inline-flex;
}
The CSS flex-direction property defines in which direction the container wants to stack the flex items.
row: from left to right (ltr) and right to left (rtl).
row-reverse: from right to left (ltr) and left to right (rtl).
column: from top to bottom (ltr) and bottom to top (rtl).
column-reverse: from bottom to top (ltr) and top to bottom (rtl).
flex-container{
flex-direction: row | row-reverse | column | column-reverse;
}
The CSS flex-wrap property specifies whether the flex items should wrap or not.
nowrap: all flex items will be on one line.
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
flex-container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
The CSS flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
flex-container{
flex-flow: row wrap;
}
The CSS justify-content property is used to align the flex items.
flex-start: items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
flex-end: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
flex-container{
justify-content: flex-start | flex-end | center;
justify-content: space-between | space-around | space-evenly;
justify-content: start | end | left | right;
}
The CSS align-items property is used to align the flex items.
stretch: stretch to fill the container
flex-start/start/self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules
flex-end/end/self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
flex-container{
align-items: stretch | flex-start | flex-end | center;
align-items: baseline | first baseline | last baseline;
align-items: start | end | self-start | self-end;
}
The CSS align-content property is similar to justify-content property with same values except that it works with horizontal cross axis.
The CSS order property specifies the order of the flex items (rearrange).
.item{
order: 2;
}
The CSS flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
.item{
flex-grow: 4;
}
The CSS flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
.item{
flex-shrink: 4;
}
The CSS flex-basis property specifies the initial length of a flex item.
.item{
flex-basis: 100px;
}
The CSS align-self property specifies the alignment for the selected item inside the flexible container.
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
The CSS flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
.item{
flex: 0 0 200px;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved