Css layout problem

:
1 31%
2overflow:hidden

flex:

Css
Mar.13,2021

mainly uses flex layout and: nth-child () selector. Let every three elements occupy exactly 100% of the position.
style

<style>
    .container {
      width: 60%;
      margin: 20px auto;
      border: 1px solid -sharpccc;
      padding: 20px;
    }
    .content {
      background-color: -sharpccc;
      width: 100%;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .content div {
      background-color: aquamarine;
      box-shadow: 2px 2px 5px -sharp666;
      width: 31%;
      height: 100px;
      margin: 10px 0;
    }
    .content div:nth-child(3n+2) {
      margin: 10px 3.5% 10px 3.5%;
    }
  </style>

structure

<body>
  <div class="container">
    <div class="content">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>
</body>

effect




justify-content: space-between;justify-content: flex-start;
margin-leftmargin-right;


html



space-betweenjs3

clipboard.png

Menu