Learn CSS daily

flex-direction
.flex-container { display: flex; flex-direction: row; } .flex-item { flex: 1; }

The 'flex-direction' property in CSS defines the direction of the main axis in a flex container. It determines how flex items are placed in the flex container, whether in a row or a column.

flex-basis
.flex-container { display: flex; } .flex-item { flex-basis: 200px; }

The 'flex-basis' CSS property sets the initial main size of a flex item. It specifies the ideal size of the item before any available space is distributed. It can be a length (e.g., 20%, 200px) or keyword (e.g., auto, content).

flex
.container { display: flex; } .item { flex: 1; }

The 'flex' property in CSS is used to set the flexible length on flexible items inside a flex container. It defines how a flex item will grow or shrink to fit the available space along the main axis.

filter
.filter-example {  width: 200px;  height: 200px;  background-image: url('example.jpg');  filter: blur(5px) grayscale(50%);  }

The CSS 'filter' property allows you to apply graphical effects like blur, grayscale, brightness, contrast, and more to an element's content. It can be a powerful tool for creating interesting visual effects on images and other elements.

empty-cells
table { empty-cells: show; }

The 'empty-cells' property in CSS controls the rendering of table cells that have no visible content. By default, table cells with no content are collapsed, but setting 'empty-cells' to 'show' will display borders around these empty cells.