Display & Flex-Direction Property in CSS
- Introduction
- Display property
- Flex-direction property
- How do I display flex in a Column
- Conclusion
Introduction
Hello guys, In this article we will learn about CSS display: flex with flex-direction: column property. In CSS display property is one of the important property for controlling layout. For which we use the display property?. Because, This CSS display property determines whether an html element should be displayed in a same line or displayed in the line-by-lines. Let us first learn about the display property and then the flex direction property with the display property. Display property contain many values and let’s look at the important 4 value in it. There is also a newer option of the display property called as flex. Which we use for building flexbox layout and flex also provides an easier way for position elements in our layout.
Display property in CSS
You can use this to change your html element anywhere. The reason why so many people use, this property is to convert block element to inline element and inline element to block element. The 4 most important values used in display property are Inline, Block, Flex and none. I will explain these display values one by one.
Inline Value:
<html> <head> <title>Display Property</title> <style type="text/css"> ul li { display: inline; } </style> </head> <body> <ul> <li>Home</li> <li>Web Design</li> <li>Blog</li> <li>Contact Us</li> <li>About</li> </ul> </body> </html>
- In this above code, I will create menu bar using Un-ordered List tag and list tag.
- Normally the list tag in HTML is a block element, the block element is that all the HTML elements do not come in the same line, comes line-by-line automatically.
- Using the display property have to set it on the same lines.
- For that you have to type display: inline style for the <li> tag inside the <ul> tag.
- Created menu bar outline successfully and this inline method property-value was useful for websites menu bar.
Block Value:
<html> <head> <title>Display Property</title> <style type="text/css"> span{ display: block; } </style> </head> <body> <span>Test 1</span> <span>Test 2</span> <span>Test 3</span> </body> </html>
- In this above code, Create a three <span> tag and enter some values inside.
- By default the output will be on the same line because, <span> is an inline element.
- To use display: block, The HTML element in a same line can be brought to the line-by-line.
These two block and inline elements are important interview questions.
Flex Value:
<html> <head> <title>Display Property</title> <style type="text/css"> .parent{ display: flex; background-color: grey; } </style> </head> <body> <div class="parent"> <div>Group 1</div> <div>Group 2</div> <div>Group 3</div> <div>Group 4</div></div> </body> </html>
When you can use this property an element, it becomes flexible. If you use flex, the parent <div>tag will become a block element and the child <div>tag will become an inline element. In the above code , the parent div takes the full-width row and still behaves like a block level element. If you set the height of the parent div will be 0, However, if you use the display: flex property, it will gain height until it covers all the baby elements. And have many flexbox properties such as flex-direction, alignment-items, can also be used for its children. Flex value CSS display: flex with flex-direction: column property is one of the greatest inventions of man. Let’s see what happens if we set display: flex in the parent div and flex-direction: column in the child div.
None Value:
Display: none;
This is used to prevent HTML element output. If you use this, the background will also hide and the content below will automatically upward. If you set this to the body tag, the body (entire page) will disappear or be hidden. It ensures the element is disappeared in display and you can still see in DOM.
Flex-direction property in CSS
flex-direction: row |row-reverse |column |column-reverse;
It establishes the main axis which in turn besides. The flex-direction can accept one of four values. The first value is row, which is default value and it sets the main axis from left to right. The second value is row-reverse, you can set the main axis direction from right to left which results in the flex items being placed from the right to the left. The third value allowed is column, when you set flex-direction to column the main axis flows from top to bottom. So the materials are stacked and flow from top to bottom. And final value is column-reverse, the result is items are flow from bottom to top. So the flow-direction sets the direction of the main axis thereby controlling how the items are placed in a container.
How do I display flex in a Column in CSS:
<html> <head> <title>Display with flex-direction Property</title> <style type="text/css"> .parent{ display: flex; flex-direction: column; } .box{ width: 100px; height: 100px; text-align: center; margin: 2px; justify-items: center; } .child1{ background: red; } .child2{ background: blueviolet; } .child3{ background: greenyellow; } </style> </head> <body> <div class="parent"> <div class="box child1">Group 1</div> <div class="box child2">Group 2</div> <div class="box child3">Group 3</div> </div> </body> </html>
- The parent div tag contain three child div tag.
- Let us first give the value of CSS display: flex with flex-direction: column property to the parent div in style.
- You will see the three box in column. It is default value , just like that if you do not give these two qualities.
- Change the value of flex-direction to row. It shows the main axis from left to right.
- Change the value of flex-direction to row-reverse. It goes on the right side and shows the main axis from right to left.
- Change the value of flex-direction to column-reverse. The result is items are flow from bottom to top.
Conclusion:
These display and flex-direction property are very useful in CSS display: flex with flex-direction: column property. You can change any element using these two properties. So, if you do not know how to use these two properties together I think this article will be very useful for you.