Pattern Library by Cloudy knot

Flexbox 

<main class="main-wrapper">
    <div class="flexbox -centered -only-flex-component">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</main>
 
<main class="main-wrapper">
  <div class="flexbox -centered -only-flex-component">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</main>
 
/* No context defined. */
  • Content: 
    .flexbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: auto;
}
.flexbox.-centered {
  justify-content: safe center;
}
.flexbox.-ended {
  justify-content: flex-end;
}
.flexbox.-only-flex-component {
  width: 100%;
  max-width: 30rem;
}
.flexbox.-only-flex-component > * {
  width: 6rem;
  height: 6rem;
  background-color: #425eec;
}
.flexbox.-only-flex-component::after {
  content: "";
  display: block;
  width: 6rem;
}
  • URL: /components/raw/flexbox/style.css
  • Filesystem Path: src/components/6-layout/flexbox/style.css
  • Size: 460 Bytes

No notes defined.