How to flex-start items at the beginning of the container using CSS ?
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
- display: flex;
- flex-direction: row ;
- justify-content: flex-start;
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:
Please Login to comment...