Disposition CSS Flex pour un défilement fluide

Cet article présente principalement l'exemple de code de mise en page flexible pour obtenir un défilement transparent et le partage avec tout le monde, comme suit :

Démonstration du cas

mise en page flexible

La mise en page dite flexible est la mise en page flexible. Cette mise en page est plus couramment utilisée sur mobile. terminaux, mais avec le développement des navigateurs La version est mise à jour et la mise en page flexible est de plus en plus utilisée en raison de ses propres avantages.

Idée :

• Analysez d'abord la structure de cette petite démo, les structures supérieure et inférieure, nous pouvons utiliser un conteneur pour l'emballer (la soi-disant grande boîte ).

• Le haut est une navigation, et le haut est un ul. En dessous, nous pouvons utiliser deux p, 100% de la largeur et une hauteur personnalisée.

• Ensuite, nous ouvrirons le modèle et mémoriserons la certaine boîte parent ! display:flex;, alors comment le diviser de haut en bas ? Continuez à ajouter flex-wrap: wrap; qui sépare les parties supérieure et inférieure. N'est-ce pas très pratique ?

• L'étape suivante est la partie inférieure. ul est imbriquée dans p, et la hauteur de ul est facile à comprendre. C'est la hauteur de p. , peut être infiniment large ! ! ! Nous laissons la largeur de ul être de 3000px

• Ensuite, nous mettons li Comme vous le voyez, l'intérieur de li a également une structure supérieure et inférieure, donc, hehe ! Li doit-il également activer flex ? Le p en haut est pour img et la balise a en bas.

• N'oubliez pas, vous devez le faire flotter ! Et pensez au débordement : caché là

effet d'animation

• Nous avons cinq images et nous la faisons maintenant bouger de droite à gauche. Alors nous appelons le mouvement ul, est-il possible de conduire le mouvement li ?

• Nous utilisons @keyframes pour changer la valeur gauche de ul, mais un problème survient, j'ai mis cinq photos et ul a bougé, et le côté droit a disparu et est devenu vide. Ce qu'il faut faire? ? ?

• Pouvons-nous faire une autre copie des cinq li et la mettre à l'arrière ? La réponse est oui ! ! Lorsque notre gauche supprime simplement le premier groupe de li, le deuxième groupe n'apparaît tout simplement pas. Ensuite, nous pouvons utiliser l'animation : exécuter une boucle infinie linéaire de 20 secondes, n'est-ce pas ?

Code de pièce CSS

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.box-big {
    position: absolute;
    display: flex;
    left: 50%;
    top: 50%;
    border: 1px solid #9FD6FF;
    transform: translate(-50%, -50%);
    width: 707px;
    height: 170px;
    /* background-color: pink; */
    flex-wrap: wrap;
    overflow: hidden;
}

.box-top {
    width: 707px;
    height: 30px;
    border-bottom: 1px solid #9FD6FF;
    background-color: #FEFEFE;
}

.p-bottom {
    width: 707px;
    height: 136px;
    /* background-color: darkgoldenrod; */
    overflow: hidden;
}

.st-icon-android {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/hd.gif);
    margin: 8px;
}

h5 {
    position: absolute;
    top: 6PX;
    left: 30px;
    color: #307DD1;
}

ul {
    position: absolute;
    left: 90px;
    width: 3000px;
    height: 100%;
    animation: run 20s linear infinite;
}

li {
    list-style: none;
    float: left;
    width: 140px;
    height: 100%;
    margin: 0 5px 0 5px;
    /* background-color: gold; */
    flex-wrap: wrap;
}

.photo {
    margin-top: 5px;
    width: 140px;
    height: 105px;
    text-align: center;
    /* background-color: springgreen; */
}

p {
    text-align: center;
}

img {
    cursor: pointer;
}

@keyframes run {
    0% {
        left: 0;
    }
    100% {
        left: -745px;
    }
}

Tutoriel recommandé : "Tutoriel CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!