/*--------------allgemeines-Screen-------------------*/ #example1 { display: flex; } #example2 { display: flex; flex-direction: column; } /*--------------eigenschaften-Screen-------------------*/ #example3 { display: flex; flex-direction: row; flex-wrap: wrap; } #example4 { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 600px; } #example5 { display: flex; flex-flow: row wrap; justify-content: center; } #example6 { display: flex; flex-flow: row wrap; justify-content: flex-end; } #example7 { display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: space-between; min-height: 300px; } #example8 { display: flex; flex-flow: row nowrap; overflow-x: scroll; } #example9 { display: flex; flex-flow: column nowrap; max-height: 600px; overflow-y: scroll; } /*--------------unterelemente-Screen-------------------*/ #example10 { display: flex; flex-flow: row nowrap; } #example10 > p { flex-grow: 1; } #example11 { display: flex; flex-flow: row nowrap; } #example11 > p { flex-basis: 100px; } #example12 { display: flex; flex-flow: row nowrap; } #example12 > p { flex-basis: 40px; flex-shrink: 0; } #example13 { display: flex; flex-flow: row nowrap; } #example13 > p { flex-basis: 40px; flex-shrink: 1; }