Add simple flexbox examples

2024-01-16 08:00:29 +01:00
parent d886f20ecc
commit 64028b20f8
1 changed files with 73 additions and 0 deletions
--- a/flexbox/flex.html
+++ b/flexbox/flex.html
@@ -0,0 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Flexbox examples</title>
 </head>
 <style>
    .separator {
        height: 20px;
        border: 0px;
    }
    span {
        background-color: aqua;
        width: 80px;
        height: 80px;
        border: 1px dotted blue;
        margin: 10px;
        padding: 10px;
        /* This flex is only for vertical centering of text in span*/
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    div {
        border: 1px dashed red;
    }
    .flex-centered {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
    .flex-rows {
        display: flex;
        height: 200px;
        align-content: flex-end;
        flex-flow: row wrap;
    }
    .flex-rows span {
        flex-grow: 1;
    }
 </style>
 <body>
 <div class="flex-centered">
    <span>centered</span>
 </div>
 <div class="separator"></div>
 <div class="flex-rows">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
 </div>
 </body>
 </html>