What is the use of Flexbox? How it will be used with the help of Bootstrap Library?

Asked 28-Jul-2021
Viewed 717 times
Ask Question

0

What is the use of Flexbox? How it will be used with the help of Bootstrap Library?    

Ethan Karla
asked by Ethan Karla in web application
Answer Add comment

1 Answer

0

When we create 2 boxes on our website, by default the second box comes below the first box, they both do not come in the same line. If we want to bring a box on the same line i.e. from left to right, we use display flex. We can also use inline flex instead of display flex. so that all the boxes are on the same line, flex always works on the parent div eg - there is a big box, inside that box there are 3 small boxes, the big box is the parent div and all the small boxes are the child div. can write together. after which we don't need to write CSS, in HTML we use d-flex inside class, another way we can give display: flex from CSS to boxing class.
What is CSS flex-direction?
Flex direction row
        If we want to start the box from the left side in the same line, then we use the flex-direction row. To give flex-direction by HTML only, in HTML class we use the row with .d-flex. After which we do not need to write CSS, another way we can use CSS to flex-direction: row; makes use of.
Flex direction row reverse
        If we want to start the box from the right side instead of the left side in the same line, then we use flex-direction row reverse. To give flex direction row reverse by HTML only, we use row-reverse with flex in HTML class .d-flex-reverse, after which we do not need to write CSS. If we want to give row reverse through CSS then we can do flex-direction: row-reverse; in CSS with HTML class. give.
Flex direction column
        If we want to keep another box after one box in the next line i.e. from top to bottom side then we use a flex-direction column. Use flex-column in HTML class to provide flex-direction column only by HTML flex-direction: column; make use of.
Flex direction column reverse
        If a box has to be placed after one line, that is, to keep it from top to bottom, then we use a flex-direction column. To give flex-direction column only by HTML, flex-column is used in HTML class to give flex-direction column by CSS flex-direction: column; makes use of.
CSS Justify Content
        Through Justify Content in CSS, we can give any box left, center, right align and the equal gap between many boxes and same gap around the box.
Justify Content Start
        Through Justify content start, we can align any box to the left side. To align the box to the left only by HTML we use justify-content-start with d-flex in the HTML class To align the box to the left by CSS justify-content: flex-start; makes use of.
Justify Content Center
        Through the justify-content center, we can place many boxes in the center of the page, to center align the box only by HTML we write justify-content-center with d-flex in HTML class. To center-align the box with CSS justify-content: center; make use of.
Justify content Flex end
        Through flex-end, we can place any box on the right side of the page or on the last of the page. Use justify-content-end with d-flex in the HTML class to keep the box in right alignment or last by HTML only. and justify-content: flex-end; make use of.
Justify content space between
        If we want an equal gap between many boxes, for that we use justify-content space between. To give an equal gap inbox only by HTML use justify-content-between with d-flex in HTML class to give an equal gap inbox by CSS justify-content: space-between; make use of.

Add comment
Ravi Vishwakarma
answered 18-Aug-2021 by Ravi Vishwakarma
MindStick Training