oujood.com

Les propriétés CSS column-count, column-fill et column-gap

Les propriétés css column-count, column-fill et column-gap spécifient réspectivement le nombre de colonnes dans lesquelles un élément doit être divisé, comment remplir les colonnes, de manière équilibrée ou non et l'espace entre les colonnes

chercher |

Dans ce tutoriel nous examinons les propriét"s css :
column-count: Définir le nombre de colonnes
column-fill Comment remplir les colonnes
column-gapL'espace entre les colonnes

Voir l'exemple en bas de la page

Définition et utilisation da la propriété css column-count

La propriété column-count spécifie le nombre de colonnes que doit comporter un élément.

La propriété column-count de CSS est utilisée pour diviser une partie du contenu d'un élément HTML en un nombre donné de colonnes.

La Syntaxe CSS
column-count: number|auto|initial|inherit;
Valeurs par défautauto
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnCount = "3"

Prise en charge de la propriété css column-count dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion50
4 -webkit-
1052
2 -moz-
9
3.1 -webkit-
37
15 -webkit-

Valeurs de la propriété column-count

number Le nombre optimal de colonnes dans lesquelles le contenu de l'élément sera réparti.
auto Valeur par défaut. Le nombre de colonnes sera déterminé par d'autres propriétés, comme par exemple "column-width".
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.

Définition et utilisation da la propriété css column-fill

La propriété column-fill indique comment remplir les colonnes, de manière équilibrée ou non.

Astuce : si vous ajoutez une hauteur à un élément à plusieurs colonnes, vous pouvez contrôler la façon dont le contenu remplit les colonnes. Le contenu peut être équilibré ou rempli de manière aléatoire.

La Syntaxe CSS
column-fill: balance|auto|initial|inherit;
Valeurs par défautbalance
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnFill="auto"

Prise en charge de la propriété css column-fill dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- et -moz- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion501052
13 -moz-
10
7 -webkit-
37

Valeurs de la propriété column-fill

balance Valeur par défaut. Remplit chaque colonne avec à peu près la même quantité de contenu, mais ne permet pas aux colonnes d'être plus hautes que la hauteur définit pour l'élément (ainsi, les colonnes peuvent être plus courtes que la hauteur car le navigateur distribue le contenu uniformément à l'horizontale).
auto Remplit chaque colonne jusqu'à ce qu'elle atteigne la hauteur, et ce jusqu'à ce qu'il n'y ait plus de contenu (cette valeur ne remplit donc pas nécessairement toutes les colonnes ni de manière uniforme).
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.

Définition et utilisation da la propriété column-gap css column-gap

La propriété column-gap spécifie l'écart (l'espace) entre les colonnes.

Remarque : si une règle de colonne column-rule est présente entre les colonnes, elle apparaîtra au milieu de l'espace.

column-gap: length|normal|initial|inherit;
Valeurs par défautnormal
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.columnGap="50px"

Prise en charge de la propriété css column-gap dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
column-gap (dans Multiple colonnes)5010521037
column-gap (dans Grid)6616611253
column-gap (dans Flexbox)84846314.170

Valeurs de la propriété column-gap

length Une longueur spécifiée qui définira l'écart entre les colonnes.
normal Valeur par défaut. Spécifie un espace normal entre les colonnes. Le W3C suggère une valeur de 1em
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.

Exemple montrant les propriétés css column-count, column-fill et column-gap

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
        <title>CSS les propriétés column-count, column-fill et column-gap</title>
        <style>
body {
  background-color:#E7E9EB;
}
#monDIV {
  height:150px;
  background-color:#FFFFFF;
  column-count:3;
  column-fill: auto;
  column-gap: 50px;
}
</style>
</head>
<body>

<h1>CSS les propriétés column-count, column-fill et column-gap</h1>

<div id="monDIV">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mattis vulputate enim nulla aliquet porttitor lacus. Eleifend mi in nulla posuere sollicitudin. Varius quam quisque id diam vel quam elementum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Neque laoreet suspendisse interdum consectetur libero. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ipsum a arcu cursus vitae congue mauris. Egestas sed tempus urna et pharetra pharetra massa massa. Nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Ac turpis egestas maecenas pharetra.
</div>

</body>
</html>

CSS changer les propriétés column-count, column-fill et column-gap avec JavaScript

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
        <title>CSS changer les propriétés column-count, column-fill et column-gap avec JavaScript</title>
        <style>
button{font-weight:900;color:blue}
#monDIV {
  height:150px;
  background-color:#FFFFFF;
  column-count:3;
  column-fill: auto;
  column-gap: 50px;
}
</style>
</head>
<body>

<h1>CSS les propriétés column-count, column-fill et column-gap</h1>
<button onclick="change_nbr_colonne()">Changer le nombre de colonnes</button> <button onclick="change_fill()">Changer column-fill</button> <button onclick="change_gap()">Changer column-gap</button> <button onclick="reset()"> Reinitialiser </button><br><br>
<div id="monDIV">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mattis vulputate enim nulla aliquet porttitor lacus. Eleifend mi in nulla posuere sollicitudin. Varius quam quisque id diam vel quam elementum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Neque laoreet suspendisse interdum consectetur libero. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ipsum a arcu cursus vitae congue mauris. Egestas sed tempus urna et pharetra pharetra massa massa. Nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Ac turpis egestas maecenas pharetra.
</div>
<script>
function change_nbr_colonne() {
  document.getElementById("monDIV").style.columnCount = "4";
}
function change_fill() {
  document.getElementById("monDIV").style.columnFill = "balance";
}
function change_gap() {
  document.getElementById("monDIV").style.columnGap="20px";
}
function reset() {
  location.href=""
}
</script>
</body>
</html>

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web