{"id":6972,"date":"2021-09-23T12:45:47","date_gmt":"2021-09-23T07:15:47","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6972"},"modified":"2021-09-23T12:46:36","modified_gmt":"2021-09-23T07:16:36","slug":"css-flexbox","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/css-flexbox\/","title":{"rendered":"CSS FLEXBOX"},"content":{"rendered":"

Flexbox<\/strong> – This term is also called the Flexible-Box which was introduced in 2009. It is a CSS3 Layout that provides a way to arrange items within a container, basically, it is a flexible container with several properties namely width, height position, etc.<\/span><\/p>\n

If you\u2019ve used CSS for a while you have probably been using \u201cthe old block model(for sections), Table (for 2D table data), Inline(for text), Positioned(for the position of an element) in all these methods you have to assign widths whether it\u2019s a percentage or a fixed width and then you use floats to arrange items on the webpage, if you have to show three boxes in a row then by using these methods you have to do factor for the margins and paddings which is somehow a complex way, So to avoid all these we can use flex which is easier to use with zero complexities.<\/span><\/p>\n

FLEXIBLE BOX MODEL:<\/b><\/p>\n

\"\"<\/p>\n

This flex model shows the structure of the flex items inside the flex container, with the help of the main axis which is used to move the flex items between main-start to main-end, and similarly for the cross-axis which is vertically aligned.<\/span><\/p>\n

FLEX PROPERTIES<\/strong><\/p>\n

In Order to use flex inside an HTML document to display the flex layouts, we have to use display property i.e, <\/span>display: flex<\/span> and <\/span>display: inline-flex<\/span>, however, they both are the same the only difference is inline displays the elements in the same line.<\/span><\/p>\n

\"\"<\/p>\n

Let us have a look at how do we add the CSS flex properties inside an HTML webpage.<\/span><\/p>\n

\"\"<\/p>\n

This is the representation of the division tag inside the body of the HTML, and inside it, we have to add the CSS style, now we have to add the flex items inside the flex container,\u00a0<\/span><\/p>\n