【CSS】Display
Display:
This property specifies how an element looks. Let's jump right into how to use display peroperty and the different values.
block
This setting defines the element as a block element. It always stats on a new line and takes up the whole width, leading to staking vertically, which means this element does not generate line breaks both before and after.
This diaglam shows how it displays in your blowser. Like <h1>, <div>, etc are set as a block element originally. You can give width and height
inline
Inline property set the element as a inline element. An element witrh a display property set to inline will not generate new line. If there is space before the element, the element will be on the same line. For instance, <span>, <a> are set to inline element. Width and Height does not affect the element.
inline-block
There's also inline-block, which is a kind of comination of block and inline.
An elemnt that is assigned inline-block is formatted as an inline elememt. , but you can set width and height.
flex
You can access to flex layout. An element set to flex is just a block element. This defines a flex container, which enables a flex context for all descendant elements(children). It offers spacial distribution between items and powerful alignment capabilities. Flexbox deals with layout in one dimention at a time, either as a row or as a column. To use two-dimentional layout, use 'grid' which controls columns and rows together. The direction of flex items can be set using flex-direction
The more details about the capabilities of flexbox is described here.
inline-flex
Displays an element as an inline-level flex container. It makes the flex container display inline, does not make flex items display inline. The main difference betweeen display flex and display: inline-flex is that inline-flex make the flex container an inline element, while its flex items maintains flexbox properties.
grid
grid allows you to establish grid layout. You can control both direction, row and colum. It generates a block-level grid. if you are interested to find out more about CSS grid, you can refer to this article.
inline-grid
It also creates grid layout, but makes it inline element so that is stays on the same line.
contenct
An element with display: contantens will be ignored itself. it is useful to have an element's children to appear as if they were direct children of the elemen'ts parent. Although it is similar to display: none, this can be targeted
none
When you set to none, the element is completely taken off the page, and it has no effect on the layout. All descendant element will also have them turned off. If you would like to have an element take up the space without rendering anything, use 'visibility: none' instead.
Discussion