What is flex; css display flex and its use
After all, what is flex, display flex is used to keep many boxes, text, images, etc. things in the same line in the website and to break it into 2 lines or when we shrink the screen, then one box should come under another box i.e. That display flex is used for responsive design and to manage things like the first box in the left and the second box in the right side.
Today we will know what is flex, flex means we can manage the box, column, alignment of any webpage very quickly, earlier we used to manage the website using float instead of flex, there are many properties in flex which can be used for the website. To manage.
What is Flex property – Flex property in CSS?
When we add a lot of image, text, box etc. things only in the left side, right side, center in the same line and after making a box, adding another box starts in the bottom line etc. We use CSS flex for things like use the property. We can also use flex property by applying flex class only with html, after which we do not need to write CSS or we use flex by applying flex class in CSS.
What is CSS display flex and display flex in bootstrap 4?
When we make 2 boxes on our website, the second box by default comes under the first box, they both do not come in the same line. If we have to bring a box on the same line ie from left to right, then we use display flex. We can also use inline flex instead of display flex.
Due to which all the boxes will come in the same line, flex always works on the parent div like – 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. You can also write together.
After which we do not need to write CSS, in html we use d-flex inside the class, another way we can give display: flex in the box class from CSS. To know about what is Flex, definitely read the full article.
What is CSS flex direction
Through CSS flex direction, we can place any box in the same line i.e. from left to right, from right to left and one box from top to bottom or from bottom to top, which is called flex direction. Display flex is always used with flex direction flex direction works when we use flex with it.
Flex direction row
If we want to start the box in the same line from the left side then we use flex direction row. To give flex-direction by html only, in html class we use 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, 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 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 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 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 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 in the last of the page. Use justify-content-end with d-flex in the html class to keep the box in right align or last by html only. and justify-content: flex-end; make use of.
Justify content space between
If we want equal gap between many boxes, for that we use justify content space between. To give equal gap in box only by html use justify-content-between with d-flex in html class to give equal gap in box by CSS justify-content: space-between; make use of.
Justify content around
If we want to give equal gap around many boxes, then we use justify content space around. To give equal gap in box only by html use justify content around with d-flex in html class to give gap in box by CSS justify-content: space-between; make use of.
CSS align items
Text, many small and big boxes and any element can be started from the top of the webpage in a single line. You can keep all the boxes in the center from top to bottom or you can start all the boxes from the last of the page.
Align items flex start
We can start many small big boxes or text from the top of the page by Align items flex start, we can also use only align-items-start instead of flex-start. To make html start from top use align-items-start with d-flex in the html class to start from box top by CSS align-items: flex-start; makes use of.
align items start by HTML and CSS
Align items center
By Align items center we can center small big box in top and bottom position only to keep center align many boxes by html we use align-items-center with d-flex in html class css To align the box center by align-items: center; makes use of.
Align items flex end
Through the flex end, we can keep many small and big boxes in the top to bottom position at the last of the main box. html uses align-items-end to place all boxes at the end of the main box, css uses align-items: flex-end; makes use of.
Align items stretch
By Align items stretch, we can keep the height of the child-box inside the main-box according to the height of the main-box, in which the content of the child-box remains in its place but according to the background color and border color of the main-box gets stretched. Use align-items-stretch in d-flex with box to align-items-stretch only by html and align-items: stretch; to stretch child-box by CSS. makes use of.
CSS Flex wrap
When we make many boxes, after the box is over in one line, we can break the box according to the space in the second line and keep it in the same line or we can reverse the box from the second line to the first line. can drive.
Flex wrap no-wrap
By flex wrap no-wrap we can keep the box in the same line after the box is completed in one line the box does not break in the second line by html flex with d-flex to keep the box in the same line -nowrap is used by CSS to keep the box on the same line flex-wrap: no-wrap; makes use of.
flex wrap no-wrap by html only –
Flex wrap
With CSS flex wrap, we can break the box in one line after it is finished in the next line, html use flex-wrap with d-flex in the box to break the box in the next line by CSS flex-wrap: wrap; makes use of.
CSS flex wrap reverse
By flex wrap reverse, we can start the box from the second line to the first line, that is, the box starts from the last of the second line instead of the first line. To run box inverted by html only, use box with d-flex in it. To turn the box upside down using html and css flex-wrap: reverse; makes use of.
What is Flex, CSS display flex and Flex property have been explained in simple language, if you have any problem related to flex, you can ask your question in the comment box below. For more information on what is Flex, you can read from bootsrap's website.
