Flex Align-Items
What are competencies?
EXP:
40
Problem statement
Lets get started with CSS! Control the items of flexbox container.
Welcome, developers! Your task is to vertically center the flex-items inside the flexbox. Focus on using CSS display flex to make flexbox container and align-items to veritcal-centered the flex-items.
Task for students
- Must to have
- element with 'container' class contains 9 children each having 'item' class.
- 'container' class style the element with flex display, 20px padding, 500px width, whitesmoke background color, vertically-centered aligned flex-items and it should wrap it's children inside it's border.
- 'item' class style the element with bisque background color and 1px solid border.
UI reference
- Use the given provided code and try to mirror the UI.
Evaluation
- After submission, your solution will be evaluated automatically based on the tasks defined above.
- Upon successful completion of all the tasks/requirements, you will get a full score, and there will not be any partial scoring.
- You can work on your failed test cases & resubmit your solution.
- Your problem will get evaluated instantly.
Do’s & don’t
- Use the given code structure in editor and do not make any changes.
- Do not modify existing classes or tags.
- Focus on correct HTML structure and class names.
Query & feedback
- In case of any query/feedback on this project, please fill this form & we will soon get in touch with you to resolve.
Best of luck, developers!