FLEX in CSS

Q1. Why do we need flex?

a. The reason we need to use flex is because it is supported in all major browsers.

b. We don’t need an external library for using flex.

c. We don’t need properties of CSS like width, float, position when using flex.

d. Flex also manages the height of the container, but in CSS when we give float property we have to manage the height of the container.

e. In CSS there is always an issue of how to position, center or dynamically resize elements on a page but flex is a modern tool to create responsive designs.

Q2. How can we deal with the same problem in flex?

We can deal with same problem in flex by using properties of the flex like:

We want to center the div in the section. There are many ways to center the div through CSS but one of the easiest ways to center the div is by using flex.

To center the inner div element we have to make the parent element a flex container. By using property display : flex to make it a flex container. To center the element horizontally we use property justify-content : center to parent element now to center the element vertically we use property align-item : center  to parent element. By using only these properties we get our div element center of the parent element.

Q3. What is Flex?

Flex is a one-dimensional layout method for laying out items in rows and columns. It was introduced in 2009 by Tab Atkins Jr, as a new layout system, and its goal was to help developers to build responsive web design. By using this we can get flexible responsive layout design without using float and other properties of the CSS.

Q4. How can we use it?

When using flex, we need to remember three terms – flex-container, flex-content, flex-item. And then we have to give the properties of these three terms as required.

display – this sets the element as an inline or block flexbox container element

justify-content – this controls the horizontal alignment of items within the flex container

align-items – this controls the vertical alignment of items within the flex container

By using only these properties, which are applied to the flex container, we can produce a lot of different layouts.

Q5. What is flex-container?

At which section we apply the display : flex property, which is called flex-container. flex-container is the parent element for it’s item divs. This becomes flexible by using display : flex property. It contains the following properties – flex-direction, flex-wrap, flex-flow, justify-content, align-item, align-content.

Q6. What is flex-content?

All the items of flex-container together, we called flex-content.

Q7. What is flex-item?

All the first child of a container at which the display : flex property is applied are called flex-items. It contains the following properties – order, flex-grow, flex-shrink, flex-basis, flex, align-self. 

By AVNI RAJPUT