As a beginner in web development, I wanted to learn how to create flexible and responsive layouts using CSS. I discovered Flexbox and decided to replicate the mobile version of Instagram's layout to test my new knowledge.
To begin the task:
1- I looked at Instagram's page source code and based my HTML on it.
2-To ensure the layout was accurate, I carefully checked the sizing, padding, border, and margin values of the page's elements.
3- I used Flexbox properties such as justify-content, align-items, and flex-wrap to precisely position and align elements on the page.
In resume what I discovered with it:
display:flex; defines an element as a flex container;
flex-direction: defines the main direction of elements within the flex container;
justify-content: defines how elements are distributed along the main axis of the flex container;
align-items: defines how elements are aligned along the cross axis of the flex container;
flex-wrap: defines whether elements within the flex container should be arranged in one or multiple lines;
flex-basis: defines the base size of a flex item, based if the display is in collumn or in row
Although it was challenging, taking me three days to complete, the experience taught me valuable skills and improved my understanding of Flexbox. I now have a better grasp of how to create modern, visually appealing layouts that are both flexible and responsive.
Take a look :D
Top comments (0)