Setting up a Flex Container
We have already studied the flex box model or container in CSS in HTML web page. You get many types of box model properties options in CSS. Which web developers can use according to their needs. In this sequence, the flex box model or flexbox container helps the web developer to create a complete flexible all device and gadgets compatible responsive web layout structure with the help of CSS. All the content item elements created in the flexbox container are properly aligned and justified or distributed.
So, let’s understand the flexbox container using CSS in HTML web page step by step.
Step 1 – First create the HTML web page structure.
If you want to display the flex container item in your web page, then you must first create an HTML structure layout. Which will display the flex container and its sub element items in your design web page.
Step 2 – Now create the CSS code for the flex container.
Now you have to write the flex container CSS source code for your HTML web page. First of all you have to manually apply the flex container flex properties as per your requirement. Here you can also apply manual custom properties to control and custom design additional flex container layout as per your requirement.
.flexbox-holder {
display: flex; /* it used to display flexbox layout */
justify-content: space-between; /* it Aligns flexbox items between space */
align-items: left; /* it Aligns flexbox items in left */
padding: 20px; /* it display space among flex item */
background-color: red; /* it display flexbox container background color */
border: 2px solid yellow; /* it display flexbox container border with and color */
}
Step 3: Now apply the attributes to the flex items from CSS in the designed web page.
Here you can apply custom flex CSS attributes and styling for CSS flexbox visibility, text formatting’s, text content spacing, content alignment, color, width, margins for better preview of flex box container model used in your web page.
.flexbox-element {
background-color: aqua; /* it display aqua flexbox background color*/
color: yellow; /* it display Text color */
padding: 30px; /* its display Space among flex item */
margin: 13px; /* it display space outer side of flex item */
border-radius: 5px; /* it display flex box Rounded corners border radious */
flex: 1; /* it grow flex item equal */
text-align: center; /* it align flex item text in Center */
}
Flex box model attributes in CSS in HTML web page.
So let’s understand some default and advanced properties of Flexbox container. Which we can use as a Flexbox container.
- flex-direction attributes – Indicates the direction of the flex item in the current web page.
- row (default) attributes – Displays the flexbox item in a row.
- column attributes – Previews the current flex container item in a column.
- row-reverse attributes – Previews the flex item in flexbox in reverse order in rows.
- column-reverse attributes – Previews the flex item in flexbox in reverse order in columns.
- justify-content attributes – Aligns the flexbox container item on the main axis in the current web page.
- flex-start attributes – Starts the flexbox item at the beginning in the current web page.
- flex-end attributes – Previews the flexbox item at the end in the current web page.
- center attributes – Previews the flexbox item in the center position in the current web page.
- space-between attributes – Allocates equal space to flexbox items in the current web page with space between the items.
- space-around attributes – Allocates equal space around flexbox items in the current web page.
- align-items attributes – Aligns flexbox items in cross axis order in the current web page.
- flex-start attributes – Aligns flexbox items to the start of the container in the current web page.
- flex-end attributes – Aligns flexbox items to the end of the container in the current web page.
- center attributes – Aligns flexbox items to the center in the current web page.
- baseline attributes – Aligns flexbox items to their baseline in the current web page.
- stretch attributes – Apply stretch attributes to flexbox items in the current web page to make the container feel more even.
A complete flex box container properties and attributes example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css FlexBox Model Container Script Code </title>
<style>
body {
font-family: sogui;
margin: 1;
padding: 1;
font-weight: bold;
}
.flexbox-model {
display: flex; /* it used to declare flexbox model layout */
justify-content: space-between; /* it used to align flex item according to axis */
align-items: center; /* it align flex item center */
padding: 7px; /* it add flexbox container padding */
background-color: #eceff1 ; /* it display flexbox container background color */
border: 1px solid blue; /* it display flexbox container border color */
}
.flexbox-element {
background-color: #5e35b1 ; /* it display flex item background color */
color: yellow; /* it display flex item Text yellow color */
padding: 20px; /* it display flex item Space inside */
margin: 10px; /* it display flex item Space outside */
border-radius: 40px; /* it display flex item Rounded corners */
flex: 1; /* it display flex item equally size */
text-align: center; /* it display flex item Center text */
}
</style>
</head>
<body>
<div class=”flexbox-model”>
<div class=”flexbox-element”>Css</div>
<div class=”flexbox-element”>Css3</div>
<div class=”flexbox-element”>Html</div>
<div class=”flexbox-element”>Html 5</div>
<div class=”flexbox-element”>JavaScript</div>
<div class=”flexbox-element”>Php</div>
<div class=”flexbox-element”>Jquery</div>
</div>
</body>
</html>
Flex box attributes properties explanation in css.
- You can declare a flexbox item in the current web page as a flex container using the display: flex; property.
- You can manually customize the flexbox layout using flexbox container attributes such as justify-content, align-items, and flex-direction.
- Whereas you can manually style flexbox items with CSS
