How to flex-start items at the beginning of the container using CSS ?
Last Updated :
24 May, 2023
The flex-start value of the justify-content property allows you to place the items at the start of the container. The flex-start indicates the flex-direction while the start indicates the writing-mode direction. The children of the parent container are allowed to align at the start of the parent container or div.
Follow the given steps:
Create an HTML file: Use a div with an id name = “GFG” (as per your choice). Inside it makes three divs.
Create CSS file: Specify the property of the div as
Example: In this example, we will use flex-start to start the items at the beginning.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
#gfg {
width: 400px;
height: 100px;
border: 2px solid #ddd;
display: flex;
justify-content: flex-start;
flex-direction: row;
}
#gfg div {
width: 100px;
height: 70px;
border: 1px solid black;
margin: 0px 2px;
background-color: #ff7100;
}
</ style >
</ head >
< body >
< h3 >
How to flex-start items at the
beginning of the container
using CSS?
</ h3 >
< div id = "gfg" >
< div ></ div >
< div ></ div >
< div ></ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...