Comment créer des “effondré” frontières autour de flex articles et de leur conteneur?

Il y a deux principales façons d'atteindre cet objectif. Sous chaque méthode vous permettra de trouver un travail de démonstration que vous pouvez développer pour voir comment il se comporte. Planant au-dessus des éléments, leur donnera une bordure rouge pour faire le choix de l'approche qui fonctionne le mieux pour vous plus facile.

Parent-enfant frontière alignement

Vous devez définir la frontière comme ceci:

ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul      { border-width: 2px  0   0  2px }
ul > li { border-width:  0  2px 2px  0  }

La clé ici est dans le border-width propriété:

• Sur le conteneur, les valeurs de la top et left sont définies à la taille souhaitée, tandis que le right et bottom sont mis à 0
• Sur les éléments, les valeurs de la right et bottom sont définies à la taille souhaitée, tandis que le top et left sont mis à 0

Ce faisant, les frontières ajouter de manière à ce qu'ils forment un bien effondré, conformément bordure autour des éléments et le conteneur.

CSS:

:hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
  border-width: 2px 0 0 2px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border-width: 0 2px 2px 0;
  background-color: rgba(0,0,0,.03);
}

HTML:

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

Réduire de moitié les frontières

Dans le cas où vous voulez avoir des frontières distinctes pour chaque élément pour n'importe quel but, c'est un compromis qui pourrait répondre à vos besoins. Étant donné souhaité border-width de 2px le CSS est comme suit:

ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}

Cette méthode permet de définir la moitié de la largeur de bordure désirée sur la société mère et de ses enfants, participer à la finale de la frontière 2px d'épaisseur. Méfiez-vous de l'utilisation de cette méthode avec des fractions de pixels (par exemple 1.5px) comme vous pouvez le de rencontrer des problèmes.

Lors de l'utilisation de border-color-modification des règles de la moitié de la largeur sera évident, mais si vous voulez plus agréable à la recherche des frontières c'est une bien meilleure approche que la première.

CSS:

:hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  background-color: rgba(0,0,0,.03);
}

HTML:

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

Dans mon cas, les frontières doivent être 1px qui le rend plus difficile. J'ai trouvé une solution à https://codepen.io/Hawkun/pen/rsIEp/ qui utilise des ombres afin de simuler des frontières, qui fonctionne réellement bien.

Voici le code en action. Il n'utilise pas de flexbox, mais si vous appliquez l'ombre à votre flex contenu, vous êtes bon pour aller.

CSS:

body {
  font-family: sans-serif;
  background-color: #eee;
  padding: 20px;
}

.info {
  color: darkred;
  font-weight: bolder;
}

.container {
  background-color: white;
  float: left; /* Makes the container height the same as its children. */
  padding: 10px;
  margin-bottom: 40px;
}

.container div {
  padding: 20px;
  float: left;
  background-color: #def;
  
  
  /* And here comed the trick: */

  box-shadow: 
1px 0 0 0 #888, 
0 1px 0 0 #888, 
1px 1px 0 0 #888,   /* Just to fix the corner */
1px 0 0 0 #888 inset, 
0 1px 0 0 #888 inset;

}

#container1 {
  width: 100%;
}

#container2 {
  width: 50%;
}

#container2 div {
  width: 70%;
}

HTML:

<p>The first container:</p>

<div id="container1" class="container">
  <div>Hello, this is the first floated div</div>
  <div>And this is the second</div>
  <div>And finally the third one</div>
</div>

<p>The second container:</p>

<div id="container2" class="container">
  <div>Hello, this is the first floated div</div>
  <div>And this is the second</div>
  <div>And finally the third one</div>
</div>

Avec :last-of-type vous pouvez "effondrement" de la dernière frontière. Peut-être l'ajout d'un box-sizing:border-box;