Flex Properties: Justify-content, Align-items, Flex-direction
Flexbox is an important design structure feature for creating responsive website box model or responsive menu items or any other type of auto adjust web flex box layout or structure in HTML web page. Where you can apply custom flex attributes and effects to the desired text, images, multimedia objects, or other website digital content and information inside the designed flexbox container with a responsive order like proper alignment, direction, justify content, etc.
So, let’s get to know the multiple flexbox properties in HTML web page. Which includes flex alignment, flex direction, justify content, etc.
Flex Direction Properties in CSS.
By applying CSS flex-direction properties to an existing flex container in any HTML web page, you fix the direction for the active flexbox element or item. Where you can preview the flex item direction order in row, row reverse, column, and column reverse order.
Flexbox item default direction attributes features.
- row (default) attributes – Previews the flexbox item in left to right row order in the current web page.
- row-reverse attributes – Previews the flexbox item in right to left row order in the current web page.
- column attributes – Previews the flexbox item in top to bottom column order in the current web page.
- column-reverse attributes – Previews the flexbox item in bottom to top column order in the current web page.
CSS flex-direction properties example.
.flexbox-model {
display: flex;
flex-direction: row; /* it display flex item in row order */
}
Flex Justify Content Properties in CSS.
In any HTML web page, CSS flex-justify previews content properties by aligning them in the main axis order of the flex element. Where you can manually apply flex content attributes like start, end, space-between, space-around, space-equally, etc. to the existing flex element justify content attributes.
Flexbox item default Justify Content attributes features.
- flex-start attributes – Previews the flexbox items in the start order in the current web page.
- flex-end attributes – Previews the flexbox items in the end order of the item container in the current web page.
- center attributes – Previews the flexbox items in the center order from the main axis in the current web page.
- space-between attributes – Distributes the flexbox items in equal order in the current web page, where the first flex item is previewed at the start and the last flex element item is previewed at the end.
- space-around attributes – Previews flexbox items in equal order in the current web page. Where equal space is previewed around the flex item element.
- space-evenly attributes – Previews flexbox items in equal order in the current web page, where the outer corners of the flex item are also previewed.
CSS flex-Justify Content properties example.
.flexbox-model {
display: flex;
justify-content: space-evenly; /* it display flex item space evenly */
}
Flex Align Item Properties in CSS.
In any HTML web page, CSS flex-align-items properties are used to preview flex items in flex cross axis order. Additionally, you can apply custom flex start, flex end, flex center, baseline, and stretch alignment attributes to flex item alignment.
Flexbox item Align Item attributes features.
- flex-start attributes – Aligns flexbox items to the start of the item container in the current web page.
- flex-end attributes – Previews flexbox items to the end of the item container in the current web page.
- center attributes – Aligns flexbox items to the cross-axis center order in the current web page.
- baseline attributes – Previews flexbox items to the baseline order in the item container in the current web page.
- stretch attributes – Previews flexbox items to the item container in the current web page in the stretch order.
CSS flex-Align Item properties example.
.flexbox-model {
display: flex;
align-items: stretch; /* it display flexbox item stretch order */
}
Here is an HTML and CSS example to demonstrate flexbox item properties.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Multiple Flexbox Attributes </title>
<style>
body {
font-family: sogui;
margin: 1;
padding: 1;
display: flex;
justify-content: left; /* it display flex container left direction */
align-items: center; /* it display center item */
height: 140vh; /* it display full view port height */
}
.flexbox-model {
display: flex;
flex-direction: row; /* it display flexbox model item row order */
justify-content: space-around; /* it display space around flexbox */
align-items: center; /* it align flexbox item center */
padding: 14px;
background-color: #80deea;
border: 2px solid yellow;
width: 100%; /* it display flexbox container width */
max-width: 700px; /* used to display max width */
}
.flexbox-element {
background-color: #5d4037 ; /* it display flex element color */
color: yellow; /* display flex item color */
padding: 20px; /* display flex item inside space*/
margin: 14px; /* display margin space outside item */
border-radius: 30px; /* display flex item round corner */
flex: 1; /* display flex item grow eqaul */
text-align: center; /* align flex item text center */
}
</style>
</head>
<body>
<div class=”flexbox-model”>
<div class=”flexbox-element”>Kotlin</div>
<div class=”flexbox-element”>Ruby</div>
<div class=”flexbox-element”>Matlab</div>
<div class=”flexbox-element”>Swift</div>
<div class=”flexbox-element”>Python</div>
</div>
</body>
</html>
Multiple flex properties explanation.
- flex-direction properties – Previews the flexbox item direction in the current web page. By default, you can preview flex direction properties in row, row-reverse, column, column-reverse, order.
- Justify-content properties – Previews the flexbox items in the current web page in the main axis order in the item container. In which, previews the flex items by aligning them in flex-start, flex-end, center, space-between, space-around, space-evenly, order.
- align-items properties – Previews the flexbox items in the current web page by aligning them in the item container cross axis with flex-start, flex-end, center, baseline, stretch, order.
