Display Property in css

The display property specifies the display behavior (the type of rendering box) of an element. The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

 {display: none;}
{display: inline;}
 {display: block;}
 {display: inline-block;}

INLINE

Displays an element as an inline element (like ). Any height and width properties will have no effect.

BLOCK

Displays an element as a block element (like

). It starts on a new line, and takes up the whole width.

CONTENTS

Makes the container disappear, making the child elements children of the element the next level up in the DOM.

CSS FLEX PROPERTY

The flex property sets the flexible length on flexible items.

Note: If the element is not a flexible item, the flex property has no effect.

FLEX-DIRECTION

The flex-direction property specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

div {
  display: flex;
  flex-direction: row-reverse;
}

ROW

Default value. The flexible items are displayed horizontally, as a row.

div {
  display: flex;
  flex-direction: row;
}

ROW-REVERSE

Same as row, but in reverse order.

div {
  display: flex;
  flex-direction: row-reverse;
}

COLUMN

The flexible items are displayed vertically, as a column.

div {
  display: flex;
  flex-direction:column;

COLUMN-REVERSE

Same as column, but in reverse order.

div { display: flex; flex-direction: column-reverse; }

FLEX-FLOW PROPERTY

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

The flex-flow property is a shorthand property for:

flex-direction flex-wrap Note: If the elements are not flexible items, the flex-flow property has no effect.

some other properties

div{

display:flex;
justify-content:space-evenly;/flex-start/flex-end/center/space-between/space-around;

Align-item:flex-start;/flex-end/stretch/center;

}

NOTE- IF FLEX-DIRECTION IS COLUMN,THEN JUSTIFY-CONTENT DIRECTION WILL WORK VERTICALLY AND ALIGN-ITEMS DIRECTION WILL WORK HORIZONTALLY.