What is Flexbox?
Flexbox is a CSS model that is used to create complex web application designs with CSS. Flexbox layout model is a CSS layout model that can create responsive layouts for web applications. Flexbox model's flexibility distributes unused space between vertically or horizontally aligned elements. It can automatically adjust the layout of web pages based on the size of the model's content. Only the flex-direction and flex-wrap properties define flexbox orientation and wrapping behaviour.
Advantages of Flexbox?
1. Combining Flexbox with media queries creates flexible and mobile- friendly web components.
2. Desktop and mobile supported.
3. Creating repeatable elements is quick and easy.
4. Elements in the style layer can have automatic inversion or reordering.
5. This is important for grid design.
Let's see some horizontal flex-box layouts –
1. Flex Start:
2. Flex End:
3. Center:
4. Space Between:
5. Space Around:
6. Space Evenly:
Now, let's see some Vertical flex-box layouts –
1. Flex Start
2. Flex End:
3.Center:
4.Stretch:
5. Baseline:
Hope it was helpful for you all.
For further queries or demo please comment below or contact us.
For any for consultant/ support work on O365/ development, contact us or visit our website www.sigilotech.com