Understanding and Implementing the Flex Properties

manoj , Credit to  volkotech-solutions Mar 14

Flex Properties help create flexible layouts in CSS. Understanding and implementing them involves using properties like flexbox, flex-direction, and align-items

Properties of flexbox

Flexbox is a layout module in CSS that makes it easier to design responsive and flexible layouts for web pages. Here are some of the properties of flexbox include:

You can learn more about CSS flexbox layout

Property Syntax Examples Output
Display flex display: flex;
.container{
 display: flex;
 display: inline-flex;
}
 
Flex direction flex-direction: <values>;
.container{
 flex-direction: row;
 flex-direction: row-reverse;
 flex-direction: column;
 flex-direction: column-reverse;
}
flex direction image
Justify content justify-content: <values>;
.container{
 justify-content: normal;
 justify-content: space-between; 
 justify-content: space-around; 
 justify-content: space-evenly;
 justify-content: stretch;
 justify-content: center|start
 |end|flex-start|flex-end|left|right;
}
justify content flexbox image
Flex grow flex-grow: <number> values;
.container{
 flex-grow: 3;
 flex-grow: 0.6;
 flex-grow: inherit;
 flex-grow: initial;
 flex-grow: revert;
 flex-grow: revert-layer;
}
flex grow image
Flex wrap flex-wrap: <value>;
.container{
 flex-wrap: nowrap;
 flex-wrap: wrap;
 flex-wrap: wrap-reverse;
 flex-wrap: inherit;
}
flex wrap image
Flex flow flex-flow: <flex direction | flex wrap>;
.container{
 flex-flow: row;
 flex-flow: row-reverse;
 flex-flow: column;
 flex-flow: column-reverse;
 flex-flow: nowrap;
 flex-flow: wrap;
 flex-flow: wrap-reverse;
 flex-flow: row nowrap;
 flex-flow: column wrap;
 flex-flow: column-reverse 
 wrap-reverse;
}
flex flow image
Align self align-self: <value>;
.container{
 align-self: center; 
 align-self: start; 
 align-self: end; 
 align-self: self-start; 
 align-self: self-end; 
 align-self: flex-start; 
 align-self: flex-end; 
}
align self flexbox image
flex flex: <values>;
.container{
 flex: 2;
 flex: 10em;
 flex: 30%;
 flex: min-content;
 flex: 1 30px;
 flex: 2 2;
 flex: 2 2 10%;
}
flex image
Flex shrink flex-shrink: <number> values;
.container{
 flex-shrink: 1;
 flex-shrink: 2;
 flex-shrink: 0.6;
}
flex shrink image

Comments