CSS Notes for me

This is a page of common stuff I always have to re-google. I don’t do CSS enough to get muscle memory, so as ever, the notes are for me.

Move a status bar to the bottom of the pages

.StatusBar {
  border: 1px solid #645042;
  border-width: 3px;
  border-style: ridge;
  height: 1.1em;
  background: #bda48c;
  padding-left: 10px;
}

Flex in gifs is really clear

Flex presets describes flex:initial, flex: auto and so on.

Flex: shorthand

// flex-grow, flex-shrink and flex-basis (or the shorthand flex :fg fs fb)
flex: grow shrink basis

Flex basis

Apparently basis is the initial width or height before any auto growth or shrinking. Its almost the same as width and height, but it works on the main axes of the flex.

Flex: shorter hand

There are also:

flex: initial  // Equivalent to flex: 0 1 auto, sizes based on the w and h of components
flex: auto     // Equivalent to flex: 1 1 auto, as above, but then grows to fill main axes
flex: none     // Equivalent to flex: 0 0 auto. Like initial but no shrinking if not enough space.
flex: number   // Equivalent to flex: <number> 1 0. They get n/tot of the available space.

Flex: Grow the central pane of your window to fill it.

From stack overflow, “A common example is flex-grow: 1 or, using the shorthand property, flex: 1”.. “By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.”

Flex: keep something to a size, no grow or shrink

flex: 0 0 100px;

Grow to be the height of the pages

It seems you should set all the parents to be height 100%, so at the top level

Note the background is just so you can see if it worked.

html, body {
  height: 100%;
}

/* Note react has a div with id=root, so you also need to set this */
div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  /*padding: 0 30px;*/
}

.App {
  height: 100%;
  background-color: #4CAF50;
}

Then for every div with a class below it that you want to fill the page also set to height 100%.