KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
Zeile 37: | Zeile 37: | ||
.flexbox { | .flexbox { | ||
width: 100%; | |||
display:flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
align-items: stretch; | |||
justify-content: flex-start; | |||
margin: 0px; | |||
} | |||
.flexelement { | .flexelement { | ||
align-items: stretch; | |||
border: 1px solid #c8ccd1; | |||
padding: 6px; | |||
background-color: #f8f9fa; | |||
font-size: 94%; | |||
text-align: left; | |||
/*overflow: hidden;*/ | |||
margin: 3px 3px 3px 0px; | |||
/* flex-wrap: wrap; */ | |||
flex: 1 0 250px; | flex: 1 0 250px; | ||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: space-between; | |||
} | |||
.flexelement img { | .flexelement img { |
Version vom 23. April 2020, 11:06 Uhr
/*** Beginn allgemeine Formatierungen ***/ .thumb { margin-bottom: 0px; } .tright { margin: 0px; } .thumbinner { max-width:100%; border: 0px solid #c8ccd1; padding: 0px; background-color: #f8f9fa; font-size: 94%; text-align: left; overflow: hidden; } body:not(.collapsed-menu) .thumbinner { color: red; } @media (max-width: 767px) { .thumbinner { width: auto !important; /* override style attribute */ } .thumbinner .thumbimage { width: auto; } } .flexbox { width: 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin: 0px; } .flexelement { align-items: stretch; border: 1px solid #c8ccd1; padding: 6px; background-color: #f8f9fa; font-size: 94%; text-align: left; /*overflow: hidden;*/ margin: 3px 3px 3px 0px; /* flex-wrap: wrap; */ flex: 1 0 250px; display: flex; flex-wrap: wrap; align-content: space-between; } .flexelement img { width: 100%; height: auto; } .flexelement.items_0 { max-width: 80%; float: right; margin-left: 10px; margin-bottom:10px; margin-top: 0px; } .flexelement.items_1 { flex-basis: 100%; } .flexelement.items_2 { flex-basis: 47%; } .flexelement.items_3 { flex-basis: 31%; min-width: 270px; } .flexelement.items_4 { flex-basis: 24%; min-width: 250px; } .flexelement.items_5 { flex-basis: 19%; min-width: 150px; } .flexelement.items_6 { width: 16%; max-width:16%; } .flexelement.items_7 { width: 13%; max-width:13%; } .flexelement.items_8 { width: 12%; max-width:12%; } .flexelement.items_9 { width: 11%; max-width:11%; } .flexelement.items_10 { width: 9%; max-width:9%; } /* Ende allgemeine Formatierungen */ /*** Formatierungen für Mobil-Geräte ***/ @media (max-width: 768px) { .flexelement.items_0 { max-width: 100%; float: right; margin-left: 10px; margin-bottom:10px; margin-top: 0px; } } /* Ende Formatierung für Mobil-Geräte (max768) */