Comment définir l'espace entre la Flexbox ?
Définition de l'espace entre Flexbox items implique l'utilisation de propriétés telles que justifier-contenu avec des valeurs comme l'espace entre ou espace autour , et écart , pour répartir uniformément l'espace entre les éléments le long de l'axe principal, améliorant ainsi l'espacement et l'alignement de la disposition dans un conteneur flexible.
Il existe certaines approches suivantes :
Table des matières
- Utilisation de la propriété justifier-content.
- Utilisation de la propriété gap pour définir l'espace
1. Utilisation de la propriété justifier-content.
Le propriété justifier-contenu dans Boîte flexible CSS aligne les éléments flexibles le long de l'axe principal. Il peut répartir l'espace entre les éléments avec des valeurs telles que flex-start, flex-end, center, space-between, space-around et space-uniformément, en contrôlant l'alignement et l'espacement au sein d'un conteneur flexible.
Syntaxe:
- La valeur space-between est utilisée pour afficher les éléments flexibles avec un espace entre les lignes.
justify-content: space-between;
- La valeur space-around est utilisée pour afficher les éléments flexibles avec un espace entre, avant et après les lignes.
justify-content: space-around;
Exemple: Dans cet exemple, nous montrons l'utilisation de justifier-contenu dans CSS Flexbox pour répartir l'espace entre les éléments. space-around crée un espace égal autour des éléments, tandis que space-between place un espace égal entre les éléments.
HTML Espace entre flexboxtitle> <style>.flex2 { affichage : flex ; justifier-contenu : espace autour ; couleur de fond : vert ; } .flex3 { affichage : flex ; justifier-contenu : espace entre les deux ; couleur de fond : vert ; } .flex-items { couleur d'arrière-plan : #f4f4f4 ; largeur : 100 px ; hauteur : 50px ; marge : 10px ; alignement du texte : centre ; taille de police : 40 px ; } h3 { texte-align : centre ; } .geeks { taille de police : 40 px ; alignement du texte : centre ; couleur : #009900 ; poids de la police : gras ; } style> tête> <body> <div>techcodeview.comdiv> <h3>Espace entre flexboxh3> <br> <b>justifier-contenu : espace autour de b> <div> <div>1div> <div>2div> <div>3div>div> <br> <b>justifier-contenu : espace entre b> <div> <div>1div> <div>2div> <div>3div>div> <br>corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt='Définition de l'espace entre la Flexbox'> </p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2 </strong> </b> <span>. En utilisant le </span> <b> <strong>propriété d'écart </strong> </b> <span>pour définir l'espace </span> </h2> <p dir='ltr'> <span>Le </span> <span>propriété d'écart en CSS </span> <span>définit l'espace entre les éléments Flexbox ou Grid. Il s'agit d'un raccourci pour espace de ligne et espace de colonne, ce qui facilite la gestion de l'espacement de manière cohérente sans marges ni remplissage supplémentaires, améliorant ainsi le contrôle et la lisibilité de la mise en page. </span> </p> <p dir='ltr'> <b> <strong>Syntaxe: </strong> </b> </p> <pre>gap: value; </pre> <p dir='ltr'> <b> <strong>Exemple: </strong> </b> <span>Dans cet exemple, nous utilisons la propriété gap avec la propriété flexbox pour ajouter un espace entre les éléments individuels. </span> </p>HTML <code> <pre> <html> <head> <style>.flex-conteneur { affichage : flex ; écart : 20 px ; /* Définit l'espacement souhaité entre les éléments flexibles */ } .flex-item { background-color: lightblue; remplissage : 10 px ; } .geeks { taille de police : 40 px ; couleur : #009900 ; poids de la police : gras ; } style> tête> <body> <div>techcodeview.comdiv> <h3>Utilisation de la propriété d'écarth3> <div> <div>Élément 1div> <div>Élément 2div> <div>Élément 3div> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox-2.webp' alt=''> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Comment définir l'espace entre la Flexbox ?&url=https://www.techcodeview.com/how-set-space-between-flexbox"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/how-set-space-between-flexbox"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/how-set-space-between-flexbox&title=Comment définir l'espace entre la Flexbox ?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/serialization-deserialization-java-with-example" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/it-problems-solutions/24/serialization-deserialization-java-with-example.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Sérialisation et désérialisation en Java avec exemple" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/serialization-deserialization-java-with-example">Sérialisation et désérialisation en Java avec exemple </a>
</h4>
</div> <div class="group">
<a href="/foreign-key-dbms" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/dbms-tutorial/35/foreign-key-dbms.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clé étrangère dans le SGBD" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/foreign-key-dbms">Clé étrangère dans le SGBD </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articles </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/probability-of-knight-to-remain-in-the-chessboard">
<img src="https://techcodeview.com/img/dsa/87/probability-of-knight-to-remain-in-the-chessboard.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Probabilité du chevalier de rester sur l'échiquier" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/probability-of-knight-to-remain-in-the-chessboard" class="hover:text-tech-500 transition-colors line-clamp-3">Probabilité du chevalier de rester sur l'échiquier </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/pi-formulas">
<img src="https://techcodeview.com/img/maths-formulas/96/pi-formulas.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Formules Pi" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/pi-formulas" class="hover:text-tech-500 transition-colors line-clamp-3">Formules Pi </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/numpy-array-python">
<img src="https://techcodeview.com/img/python-numpy-arraycreation/93/numpy-array-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tableau NumPy en Python" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/numpy-array-python" class="hover:text-tech-500 transition-colors line-clamp-3">Tableau NumPy en Python </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/minimum-distance-to-travel-to-cover-all-intervals">
<img src="https://techcodeview.com/img/mathematical/26/minimum-distance-to-travel-to-cover-all-intervals.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Distance minimale à parcourir pour couvrir tous les intervalles" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/minimum-distance-to-travel-to-cover-all-intervals" class="hover:text-tech-500 transition-colors line-clamp-3">Distance minimale à parcourir pour couvrir tous les intervalles </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/driving-ireland-s-ring-kerry-1311306">
<img src="https://techcodeview.com/img/blog/38/driving-ireland-s-ring-kerry.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Conduire l’Anneau du Kerry en Irlande : cartes et guide complet" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/driving-ireland-s-ring-kerry-1311306" class="hover:text-tech-500 transition-colors line-clamp-3">Conduire l’Anneau du Kerry en Irlande : cartes et guide complet </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/boolean-algebra">
<img src="https://techcodeview.com/img/picked/37/boolean-algebra.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algèbre de Boole" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/boolean-algebra" class="hover:text-tech-500 transition-colors line-clamp-3">Algèbre de Boole </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/best-character-analysis-131550">
<img src="https://techcodeview.com/img/blog/09/best-character-analysis.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Meilleure analyse de personnage : Jay Gatsby – The Great Gatsby" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/best-character-analysis-131550" class="hover:text-tech-500 transition-colors line-clamp-3">Meilleure analyse de personnage : Jay Gatsby – The Great Gatsby </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/cut-command-linux-with-examples">
<img src="https://techcodeview.com/img/linux-command/34/cut-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="commande cut sous Linux avec des exemples" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/cut-command-linux-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">commande cut sous Linux avec des exemples </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/java-constant">
<img src="https://techcodeview.com/img/java-tutorial/86/java-constant.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Constante Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/java-constant" class="hover:text-tech-500 transition-colors line-clamp-3">Constante Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/stream-in-java">
<img src="https://techcodeview.com/img/java/02/stream-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Flux en Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/stream-in-java" class="hover:text-tech-500 transition-colors line-clamp-3">Flux en Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversion Java
</a> <a href="/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Mathématiques
</a> <a href="/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Collections Java
</a> <a href="/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Différences
</a> <a href="/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Chaîne Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Des Articles Intéressants </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment insérer des espaces/tabulations dans du texte en utilisant HTML et CSS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/css-questions/">Questions Css </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-insert-spaces-tabs-text-using-html">Comment insérer des espaces/tabulations dans du texte en utilisant HTML et CSS </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/50/complete-guide-digital-sat-grammar-rules.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Le guide complet des règles de grammaire numérique SAT" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/complete-guide-digital-sat-grammar-rules-1311170">Le guide complet des règles de grammaire numérique SAT </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/91/two-truths-lie.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Deux vérités et un mensonge : 35 bons mensonges pour tromper les autres" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/two-truths-lie-131264">Deux vérités et un mensonge : 35 bons mensonges pour tromper les autres </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/python-tutorial/47/how-plot-graph-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment tracer un graphique en Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/python-tutorial/">Tutoriel Python </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-plot-graph-python">Comment tracer un graphique en Python </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/exception-handling/69/java-catch-multiple-exceptions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java intercepte plusieurs exceptions" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/exception-handling/">Gestion Des Exceptions </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/java-catch-multiple-exceptions">Java intercepte plusieurs exceptions </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/picked/70/birds-name-english-hindi-list-100-name-birds.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Nom des oiseaux en anglais/hindi – Liste de 100 + nom des oiseaux" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/picked/">Choisi </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/birds-name-english-hindi-list-100-name-birds">Nom des oiseaux en anglais/hindi – Liste de 100 + nom des oiseaux </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/cs/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>