Category Archives: Flexbox

1) CSS Rule Structure

Rules defined in CSS file

Declarations grouped within a block:

selector {
     property: value;
     property: value;
     }

Element selector:
ul { padding-left: 5em; }

Selectors grouped within a rule:
ol, ul { margin-left: 5em; }

Class selector:
.entry-content { background-color: #c0c; }

Combination of element and class:
span.warning { font-weight: bold; }

ID selector:
#blog_title { font-size: 17px; }

Element within a class:

 .entry-content ol {
     background-color: #cc0;
     padding-left: 5em;
     }

Group combination & comment:
ol, ul { margin: 16px 0; padding: 0 0 0 40px; } /* top, right, bottom, left */

Inline syle:
<div style=”font-weight:bold; color:red”>content.php</div>

 

BTW (off topic):

en.wikipedia.org/wiki/Indent_style#Ratliff_style

en.wikipedia.org/wiki/Em_(typography)

2) My Container

EARTH
WATER
WIND
FIRE
VOID

3) Flex Samples

 

.container { display: flex; }
.container { display: inline-flex }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }
.container { align-items: flex-start | flex-end | center | baseline | stretch; }
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

.item { order: <integer>; }

.item { flex-grow: <number>; }
.item { flex-shrink: <number>; }
.item { flex-basis: <length> | auto; }
.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] }

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

9) For More Information – FYI