Search
Search CSS
vertical-align
vertical-alignThe vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box. The vertical-align property can be used in two contexts: To vertically align an i..
row-gap
row-gap (grid-row-gap)The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.Syntax/* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: ..
place-self
place-selfThe place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant l..
place-items
place-itemsThe CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout ..
place-content
place-contentThe place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a releva..
order
orderThe order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.Syntax/* <int..
margin-right
margin-rightThe margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. The vert..
margin-left
margin-leftThe margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. The vertica..
justify-self
justify-selfThe CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. The effect of this property is dependent of the layout mode we are ..
justify-items
justify-itemsThe CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. The effect of th..
justify-content
justify-contentThe CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid contai..
gap
gap (grid-gap)The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.Syntax/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; ..
flex-wrap
flex-wrapThe flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. See Using CS..
flex-shrink
flex-shrinkThe flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. In us..
flex-grow
flex-growThe flex-grow CSS property sets the flex grow factor of a flex item's main size.Syntax/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-g..
flex-flow
flex-flowThe flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.Constituent propertiesThis property is a shorthand for the following CSS pro..
flex-direction
flex-directionThe flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). Note that the values row and row-rever..
flex-basis
flex-basisThe flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. In this example the flex-grow and flex-shrink..
flex
flexThe flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.Constituent propertiesThis property is a shorthand for the following CSS p..
<display-legacy>
<display-legacy>CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details thos..
<display-inside>
<display-inside>These keywords specify the element's inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These ke..
display
displayThe 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. Formally, the display property ..
column-gap
column-gap (grid-column-gap)The column-gap CSS property sets the size of the gap (gutter) between an element's columns. Initially a part of Multi-column Layout, the definition of column-gap has been b..
align-self
align-selfThe align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. The propert..
align-items
align-itemsThe CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the a..
align-content
align-contentThe CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. The interactive example below use Grid ..
