web-dev-qa-db-fra.com

CSS3 Flex - Largeur et hauteur extensibles

Je voudrais faire une application de calendrier plein écran en utilisant le modèle CSS3 Flex. Bien que je puisse faire en sorte que le calendrier s'adapte assez bien horizontalement, je ne trouve pas un moyen de laisser les semaines du calendrier s'étirer en proportion égale pour consommer toute la hauteur disponible.

Voici un jsFiddle pour illustrer mon dilemme: http://jsfiddle.net/CgXLa/

Les semaines sont également réparties jusqu'à ce que je les fasse display: flex;. Même si j'englobe tous les jours dans un élément div et que je fais display: flex; au lieu de chaque semaine, j'ai toujours le même problème.

Comment puis-je utiliser le modèle Flex pour étirer horizontalement et verticalement?

htmlcssflexbox
14
Micah Henning

Voici ma solution.

J'ai retiré un emballage supplémentaire environ des semaines. Maintenant, les semaines et le th sont tous des descendants directs du calendrier

<main id="calendar">
    <section class="th">
        <span>Sunday</span>
        <span>Monday</span>
        <span>Tuesday</span>
        <span>Wednesday</span>
        <span>Thursday</span>
        <span>Friday</span>
        <span>Saturday</span>
    </section>
    <div class="week">
        <div></div>
        <div></div>
        <div></div>
        <div data-date="1"></div>
        <div data-date="2"></div>
        <div data-date="3"></div>
        <div data-date="4"></div>
    </div>
    ....

Maintenant, mon CSS est

/* Calendar 100% height */
#calendar { height: 100%; 
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.th {
    flex: 30px 0 0;
} 
.week {
    flex: 30px 1 0;
    border-bottom: 1px solid #ccc;    
}

La clé est de donner au th élément une hauteur définie (flex-base: 30px) mais pas de flex-grow, et la semaine aussi une certaine hauteur pour commencer, mais flex-grow: 1.

Cela fait que les semaines occupent tout l'espace restant du calendrier non utilisé par th, également entre elles.

violon mis à jour

19
vals