Comment définir des valeurs par défaut pour aligner le contenu en CSS ?-tutoriel CSS-php.cn

Comment définir des valeurs par défaut pour aligner le contenu en CSS ?

WBOY

Libérer： 2023-08-30 09:09:06

avant

830 Les gens l'ont consulté

如何设置默认值来对齐 CSS 中的内容？

CSS est un langage Web principalement utilisé pour la conception et le rendu de pages Web. Il nous fournit de nombreuses propriétés qui facilitent le processus de personnalisation. L'une de ces propriétés est la "propriété de contenu aligné".

La propriété Align content est utilisée pour allouer de l'espace entre ou autour des éléments appartenant à une flexbox ou à une grille. La valeur initiale de cette propriété est "normal". Il a une animation discrète et la valeur calculée est toujours égale à la valeur spécifiée.

Il est à noter qu'il ne s'agit pas d'un bien héritable. Il s'agit d'une propriété largement prise en charge par la plupart des navigateurs.

Les différentes valeurs pouvant être fournies pour ce bien sont décrites ci-dessous -

Démarrer - Utilisé lorsque vous souhaitez que le contenu ou les éléments commencent à être emballés à partir du début de l'élément conteneur.
End - Utilisé lorsque vous souhaitez que le contenu ou les éléments commencent à être enveloppés à partir de la fin de l'élément conteneur.
Center - Utilisé pour emballer des éléments enfants au centre d'un conteneur aligné.
Normal - Il s'agit de la valeur par défaut de la propriété de contenu aligné.
Flex-start - pour les conteneurs de type flexbox et commencera à aligner les éléments le long du bord de départ. Cependant, si nous les utilisons sur un conteneur qui n'est pas Flexbox, cela sera considéré comme un début.
Flex-end - Tout comme flex-start, ceci est également utilisé dans les conteneurs de type Flexbox et commencera à aligner les éléments le long du bord d'extrémité. Cependant, si nous les utilisons sur un conteneur qui n'est pas Flexbox, cela sera considéré comme une fin.
Espace- Entre - Les éléments spécifiés à l'aide de cette propriété seront alignés le long de l'axe horizontal du conteneur, avec un espacement égal le long des éléments adjacents.
Espace autour - Cela fonctionne de la même manière que l'espace entre, mais l'espace à gauche du premier élément et à droite du dernier élément sera égal à la moitié de l'espace entre les deux éléments adjacents.
Espace uniformément - Cela signifie simplement qu'il y a le même espace entre tous les éléments, contrairement à l'espace pair où il n'y a que la moitié de l'espace entre le début du premier élément et la fin du dernier élément.
Stretch - Il modifie automatiquement la taille des éléments dans un conteneur associés au dimensionnement automatique.

En plus de cela, nous avons safe et unsafe comme valeurs pour cette propriété. Ils sont utilisés avec le mot-clé d'alignement et dépendent des caractéristiques du conteneur, par exemple si un débordement entraînera une perte de données. En fonction de ces conditions, nous choisissons de conserver ou non l'alignement.

Exemple

Un exemple d'attribut de contenu aligné est donné ci-dessous.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #92a4b5;
      }
      #mainDiv {
         background-color: black;
         width: 100%;
         height: 300px;
         display: flex;
         flex-wrap: wrap;
         align-content: stretch;
      }
      #mainDiv div {
         width: 100%;
         height: 40px;
      }
   </style>
</head>
<body>
   <h1>The example of align-content Property</h1>
   <div id="mainDiv">
      <div style="background-color: coral"></div>
      <div style="background-color: lightblue"></div>
      <div style="background-color: pink"></div>
   </div>
</body>
</html>

Copier après la connexion

Définir les valeurs par défaut pour aligner le contenu

Le terme « valeur par défaut » peut en réalité faire référence à la « valeur initiale » d'une propriété. La valeur par défaut pour l'alignement des éléments est "Stretch".

On peut donc dire que « normal » est un peu comme un mot-clé spécial avec une signification précise, mais qui change en fonction du contexte dans lequel il est utilisé. Parce que sans contexte spécifique, nous ne pouvons pas définir ce que ferait la « normalité ».

Nous pouvons utiliser normal comme valeur par défaut sans nous inquiéter car elle sera soit traitée comme invalide et utilisera la valeur de repli, soit traitée comme valide et reviendra à la valeur correcte.

Exemple

Vous trouverez ci-dessous un exemple de code pour définir la valeur par défaut du contenu aligné sur normal -

<!DOCTYPE html>
<html>
<head>
   <style>
      .FlexBox {
         width: 40vw;
         height: 54vh;
         border: 5px solid blue;
         display: flex;
         flex-wrap: wrap;
         background-color: rgb(170, 210, 170);
         align-content: normal;
      }
      #BoxItem1,
      #BoxItem2,
      #BoxItem3,
      #BoxItem4 {
         box-sizing: border-box;
         min-height: 20%;
         width: 22%;
         border: 1.5px dashed red;
         margin: 0.5vw;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      #BoxItem1 {
         background-color: rgb(214, 198, 192);
      }
      #BoxItem2 {
         background-color: rgb(198, 198, 49);
      }
      #BoxItem3 {
         background-color: rgb(233, 115, 135);
      }
      #BoxItem4 {
         background-color: rgb(143, 196, 196);
      }
   </style>
</head>
<body>
   <div class="FlexBox">
      <div id="BoxItem1">1</div>
      <div id="BoxItem2">2</div>
      <div id="BoxItem3">3</div>
      <div id="BoxItem4">4</div>
   </div>
</body>

Copier après la connexion

Nous pouvons voir que tous les éléments du conteneur sont alignés "normalement" par défaut, ce qui est étiré selon les spécifications du conteneur Flexbox.

Conclusion

Dans l'ensemble, utiliser CSS pour définir des valeurs par défaut pour le positionnement du contenu est un moyen simple et efficace de garantir une conception cohérente sur l'ensemble de votre site Web. En définissant une valeur unique par défaut, vous pouvez ajuster rapidement la position de tous les éléments sur chaque page sans avoir à modifier chaque élément individuellement. Cela permet aux développeurs et aux concepteurs de créer facilement une apparence cohérente qui s'adapte à n'importe quel thème ou thème. Vous pourrez facilement l'ajuster plus tard si nécessaire.

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!