Résumé de l’expérience d’apprentissage Flexbox

Syntaxe Flex

Les éléments qui adoptent la disposition Flex sont appelés conteneurs Flex (conteneurs flexibles), ou « conteneurs » en abrégé. Tous ses éléments enfants deviennent automatiquement des membres de conteneur, appelés éléments Flex (éléments flexibles), appelés « éléments ». Le conteneur

a deux axes par défaut : l'axe principal horizontal (axe principal) et l'axe transversal vertical. La position de départ de l'axe principal (l'intersection avec la bordure) est appelée début principal, et la position finale est appelée main fin ; la position de départ de l'axe transversal est appelée début croisé, et la position finale est appelé extrémité croisée.

Les éléments sont disposés le long de l'axe principal par défaut. L'espace de l'axe principal occupé par un seul projet est appelé taille principale, et l'espace de l'axe transversal occupé par un seul élément est appelé taille transversale.

Attributs sur le conteneur

Les 6 attributs suivants sont définis sur le conteneur :

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction : L'attribut flex-direction détermine la direction de l'axe principal (c'est-à-dire la direction dans laquelle les éléments sont disposés).

row(默认) | row-reverse | column | column-reverse

flex-wrap : Par défaut, les éléments sont disposés sur une ligne (également appelée « axe »). L'attribut flex-wrap définit comment envelopper la ligne si un axe ne peut pas tenir.

nowrap(默认) | wrap | wrap-reverse

flex-flow : L'attribut flex-flow est l'abréviation de l'attribut flex-direction et de l'attribut flex-wrap. La valeur par défaut est row nowrap

justify-content : Attribut justifier-content Définit l'alignement de l'élément sur l'axe principal.

flex-start | flex-end | center | space-between | space-around

attribut align-items : L'attribut align-items définit la manière dont les éléments sont alignés sur l'axe transversal.

flex-start | flex-end | center | baseline | stretch

align-content : L'attribut align-content définit l'alignement de plusieurs axes sur l'axe transversal. Si l'élément n'a qu'un seul axe, cette propriété n'a aucun effet

flex-start | flex-end | center | space-between | space-around | stretch

Propriétés sur l'élément

Les 6 propriétés suivantes sont définies sur l'élément :

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order : l'attribut order définit l'ordre dans lequel les éléments sont triés. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0.

flex-grow : L'attribut flex-grow définit le taux de grossissement de l'élément. La valeur par défaut est 0, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi.

Si tous les éléments ont une propriété flex-grow de 1, ils diviseront également l'espace restant (le cas échéant). Si la propriété flex-grow d'un élément est 2 et que les autres éléments sont tous 1, le premier occupera deux fois plus d'espace restant que les autres éléments.

flex-shrink : L'attribut flex-shrink définit le taux de rétrécissement de l'élément. La valeur par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'élément rétrécira.

Si la propriété flex-shrink de tous les éléments est de 1, lorsqu'il n'y a pas suffisamment d'espace, ils seront tous réduits proportionnellement. Si la propriété flex-shrink d'un élément est 0 et que les autres éléments sont 1, le premier ne rétrécira pas lorsque l'espace est insuffisant.

flex-basis : L'attribut flex-basis définit la taille principale de l'élément avant d'allouer l'espace excédentaire. Le navigateur utilise cet attribut pour calculer s'il y a de l'espace supplémentaire sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille d'origine du projet.

flex-basis: <length> | auto; /* default auto */

Il peut être défini sur la même valeur que l'attribut largeur ou hauteur (comme 350px), l'élément occupera alors un espace fixe.

flex : L'attribut flex est l'abréviation de flex-grow, flex-shrink et flex-basis. La valeur par défaut est 0 1 auto. Les deux dernières propriétés sont facultatives.

Cet attribut a deux valeurs de raccourci : auto (1 1 auto) et none (0 0 auto).

Il est recommandé d'utiliser cet attribut en premier au lieu d'écrire trois attributs distincts séparément, car le navigateur déduira les valeurs pertinentes.

align-self : L'attribut align-self permet à un seul élément d'être aligné différemment des autres éléments et peut remplacer l'attribut align-items. La valeur par défaut est auto, ce qui signifie que hérite de l'attribut align-items de l'élément parent S'il n'y a pas d'élément parent, cela équivaut à stretch.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Mise en page

Mise en page en grille

1 Disposition en grille de base

La disposition en grille la plus simple est la distribution uniforme. L'élément peut être défini sur flex : 1

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

Disposition à 2 pourcents

La largeur d'une certaine grille est un pourcentage fixe, et les grilles restantes sont réparties uniformément avec l'espace restant.

Définissez la largeur : pourcentage ; ou flex : 0 0 pourcentage ; pour les éléments qui nécessitent des pourcentages, et définissez le flex : 1 pour les éléments alloués automatiquement

3 Disposition du Saint Graal

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex 圣杯布局">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="HolyGrail">
  <header>header</header>
  <p class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">left nav</nav>
    <aside class="HolyGrail-ads">right ad</aside>
  </p>
  <footer>footer</footer>
</body>
</html>

*{
  margin: 0;
}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

header,
footer {
  flex: 0 0 40px;
  background-color: #ccc;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
  background-color: #0f0;
  
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  background-color: #00f;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
  background-color: #f00;
}

Voir la démo

S'il s'agit d'un petit écran, les trois colonnes du torse deviendront automatiquement des piles verticales.

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

4 Disposition fluide

Le nombre d'éléments dans chaque ligne est fixe et sera automatiquement divisé en lignes.

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

Compatible

*在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法“等分”，这个时候，我们需要给子元素设置一个“width:0%”来解决问题。

*不要给flexbox里的子元素设置“margin:auto”的属性，在部分安卓机下，它会导致该元素的宽度撑开到100%占位

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!