CSS CheatSheet

Master modern layouts and image styling with our interactive reference. Select a category and click values to preview live changes.

container

Display Flex

display

Initializes the flexbox container.

1
2
3
Interactive Preview
display: flex;
Value Presets
Nexsa Visual Reference

Flex Direction

flex-direction

Defines the main axis along which items are placed.

1
2
3
Interactive Preview
flex-direction: row;
Value Presets
Nexsa Visual Reference

Justify Content

justify-content

Aligns items along the main axis.

1
2
3
Interactive Preview
justify-content: flex-start;
Value Presets
Nexsa Visual Reference

Align Items

align-items

Aligns items along the cross axis.

1
2
3
Interactive Preview
align-items: stretch;
Value Presets
Nexsa Visual Reference

Flex Wrap

flex-wrap

Determines if items should wrap to new lines.

1
2
3
Interactive Preview
flex-wrap: nowrap;
Value Presets
Nexsa Visual Reference

Flex Gap

gap

Sets the space between items.

1
2
3
Interactive Preview
gap: 4px;
Value Presets
Nexsa Visual Reference

item

Flex Grow

flex-grow

Ability for a flex item to grow if necessary.

1
2
3
Interactive Preview
flex-grow: 0;
Value Presets
Nexsa Visual Reference

Flex Shrink

flex-shrink

Ability for a flex item to shrink if necessary.

1
2
3
Interactive Preview
flex-shrink: 1;
Value Presets
Nexsa Visual Reference

Flex Basis

flex-basis

Default size of an item before remaining space is distributed.

1
2
3
Interactive Preview
flex-basis: auto;
Value Presets
Nexsa Visual Reference

Architecture of Modern Style Sheets

CSS is no longer about simple styling; it's about architecture. From managing the Stacking Context to mastering the mathematical relationship between `clamp()` and fluid typography, our Master Reference provides the technical depth needed for pixel-perfect, responsive engineering.

Expert Implementation

Specificity & The Cascade

Stop fighting with `!important`. Our guide clarifies the mathematical weight of selectors, the differences between pseudo-classes and pseudo-elements, and how to utilize modern `layer()` rules to maintain a predictable, scalable CSS architecture that works with any framework.

CSS Engine Specs

StandardCSS4+Features-Ready
EngineGPU-Hardware-Accel
TypeDeclarative-Layout

CSS Layout FAQs

What is the Box Model?

Every HTML element is a box. The Box Model describes the relationship between Content, Padding, Border, and Margin. We recommend `box-sizing: border-box` to include padding in the total width.

Flexbox vs. CSS Grid: Which to use?

Use Flexbox for one-dimensional layouts (a row OR a column). Use CSS Grid for two-dimensional layouts (rows AND columns simultaneously).

What does 'z-index' actually do?

It controls the stacking order of positioned elements. However, it only works within a 'stacking context'. If your z-index isn't working, check the z-index of the parent element.

Can I use variables in CSS?

Yes. CSS Custom Properties (`--variable-name`) allow you to store values and reuse them throughout your stylesheet, making theme changes (like Dark Mode) extremely easy.