One Line CSS Layouts

tags:    programming personal

2023-04-29

Centering Things

.parent {
  display: grid;
  place-items: center;
}

This will center things vertically and horizontally in the parent element. Super simple.

Deconstructed Pancake

Here we are looking at the flex directive flex: which you apply to the child components in a display flex parent. The grow set to one means the child containers will grow and fil the space. If it is set to zero, they will grow only to the basewidth size and no more. Shrink set to one means they will shrink.

Deconxtructed Pancake

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box [
  flex: 1 1 150px; /* stretching*/
  flex: 0 1 150px; /* not stretching */
]