html, body {
|
width: 100%;
|
/*overflow: hidden;*/
|
margin: 0;
|
padding: 0;
|
}
|
body {
|
font-family: sans-serif;
|
overflow: scroll;
|
overflow-x: hidden;
|
}
|
|
h1, h2, h3, h4 {
|
padding: 1ex 0 0 2ex;
|
}
|
|
#subscription {
|
font-style: italic;
|
font-size: smaller;
|
}
|
|
#main {
|
display: flex;
|
flex-direction: row;
|
gap: 20px;
|
justify-content: space-evenly;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
}
|
|
#container {
|
border: solid 1px #0000cc;
|
width: 45%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.container-item {
|
width: 100%;
|
}
|
|
#item {
|
border: solid 1px #dd4444;
|
width: 45%;
|
}
|
|
.attribute-demo-code {
|
background-color: #df6a3b;
|
color: #f2ef49;
|
font-weight: bold;
|
}
|
|
|
/* style for demo elements */
|
|
.container-demo {
|
background-color: #ebd4ef;
|
gap: 5px;
|
padding: 5px;
|
border-radius: 5px;
|
max-width: 450px;
|
margin-bottom: 10ex;
|
}
|
|
.item-demo {
|
background-color: #c1bdbd;
|
}
|
|
/* {flex-direction: row} */
|
#flex-direction-row-parent {
|
display: flex;
|
flex-direction: row;
|
|
}
|
|
.flex-direction-row-child {
|
|
}
|
|
/* {flex-direction: column} */
|
#flex-direction-column-parent {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.flex-direction-column-child {
|
|
}
|
|
/* {flex-direction: row-revert} */
|
#flex-direction-row-revert-parent {
|
display: flex;
|
flex-direction: row-reverse;
|
}
|
|
#flex-direction-column-reverse-parent {
|
display: flex;
|
flex-direction: column-reverse;
|
}
|
|
|
/*{flex-wrap: nowrap}*/
|
#flex-wrap-no-wrap-parent {
|
display: flex;
|
flex-wrap: nowrap;
|
}
|
|
.flex-wrap-no-wrap-child {
|
|
}
|
|
/*{flex-wrap: wrap:}*/
|
#flex-wrap-wrap-parent {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
/*{flex-wrap: wrap-reverse:}*/
|
#flex-wrap-wrap-reverse-parent{
|
display: flex;
|
flex-wrap: wrap-reverse;
|
}
|
|
/*{flex-flow: column wrap;}*/
|
#flex-flow-column-wrap-parent {
|
display: flex;
|
flex-flow: column wrap;
|
}
|
|
/*{justify-content: flex-start}*/
|
#justify-content-flex-start-parent {
|
display: flex;
|
justify-content: flex-start;
|
}
|
|
/*{justify-content: flex-end}*/
|
#justify-content-flex-end-parent {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
/*{justify-content: center}*/
|
#justify-content-center-parent {
|
display: flex;
|
justify-content: center;
|
}
|
|
/*{justify-content: space-between}*/
|
#justify-content-space-between-parent {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
/*{justify-content: space-around}*/
|
#justify-content-space-around-parent {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
/*{justify-content: space-evenly}*/
|
#justify-content-space-evenly-parent {
|
display: flex;
|
justify-content: space-evenly;
|
}
|
