@font-face { font-family: augie; src: url('ress/augie.ttf'); } .all-container { display : flex; justify-content: center; /* align-items: baseline; width : min-content; flex-direction: row; flex-wrap: wrap;*/ } .flex-container { /* We first create a flex layout context */ display : flex; align-items: baseline; width : min-content; margin: 20px; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ /* Then we define how is distributed the remaining space */ flex-direction: column; } /* .flex-item { padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }*/ .vitraux { /* We first create a flex layout context */ display : flex; align-items: baseline; width : min-content; margin: 20px; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ /* Then we define how is distributed the remaining space */ flex-direction: column; } .vitrail-plein { margin: 3px; padding: 6px; background-image: url(ress/fond_fin.png); background-repeat: no-repeat; background-position: center; background-size: cover; } .vitrail-vide { margin: 3px; padding: 6px; background-repeat: no-repeat; background-position: center; background-size: cover; } .vitrail-select { -webkit-box-shadow:inset 0px 0px 0px 5px red; -moz-box-shadow:inset 0px 0px 0px 5px red; box-shadow:inset 0px 0px 0px 5px red; } .vitrail-hover { -webkit-box-shadow:inset 0px 0px 0px 5px blue; -moz-box-shadow:inset 0px 0px 0px 5px blue; box-shadow:inset 0px 0px 0px 5px blue; } .stats { width: 150px; padding: 10px; font-size: large; font-weight: bold; font-family: augie; }