webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau/css/flexbox.css

/*--------------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;
}