title: How to align contents by using flexbox? align-contnent and justify-contnent didn't worrk
body: <p>First of all, thank you for helping me out in advance. I tried to align three contents giving even space in each row.
  Like this image.
  <a href="https://i.stack.imgur.com/vtsRj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vtsRj.png" alt="enter image description here" /></a></p>
  <p>So, I tried to use flexbox to do this! display with flex, flex-direction: column;, and using align-items or justify-contents. However, it didn't work what I expaected. I guess the contents would be displaied clearly like the above picture. However, it shows like this picture.
  <a href="https://i.stack.imgur.com/QaQeY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QaQeY.png" alt="enter image description here" /></a></p>
  <p>Could you help me with this problem? I will leave my code below!</p>
  <pre><code>.contentsWrapper {
      display: flex;
      width: 100%;
      height: 1000px;
      // background-color: blue;
      padding: 5px;
      .contentsSide {
        width: 280px;
        padding-left: 48px;
        padding-right: 48px;
        .HorizontalLine {
          width: 160px;
          margin-bottom: 20px;
          border-top: 1px solid rgba(0, 0, 0, 0.3);
        }
        .colors {
          display: flex;
          flex-direction: column;
          span {
            margin-bottom: 20px;
          }
          .colorLists {
            margin-left: 10px;
            float: left;
            .colorLayout {
              float: left;
              // flex-wrap: wrap;
              display: flex;
              flex-direction: column;
              // justify-content: space-between;
              // align-content: space-around;
              position: relative;
              // display: grid;
              // grid-template-columns: repeat(3, 20%);
              margin-right: 15px;
              margin-left: 3px;
              label {
                background-color: beige;
                border: 1px solid #ccc;
                border-radius: 50%;
                cursor: pointer;
                height: 28px;
                left: 0;
                position: absolute;
                top: 40;
                width: 28px;
                &amp;:after {
                  border: 2px solid #fff;
                  border-top: none;
                  border-right: none;
                  content: '';
                  height: 6px;
                  left: 7px;
                  opacity: 0;
                  position: absolute;
                  top: 8px;
                  transform: rotate(-45deg);
                  width: 12px;
                }
              }
              input[type='checkbox'] {
                visibility: hidden;
              }
              input[type='checkbox']:checked {
                &amp; + label {
                  background-color: beige;
                  border-color: beige;
                  &amp;:after {
                    opacity: 1;
                  }
                }
              }
  
              .productColor {
                margin-top: 15px;
                font-size: 13px;
                width: 61.25;
                height: 25px;
              }
            }
          }
        }
        .sizes {
          .HorizontalLine {
          }
          .span {
          }
          .sizeLists {
            margin-top: 20px;
            margin-bottom: 20px;
            button {
              margin: 5px;
            }
          }
  </code></pre>
  <p>This is JS file</p>
  <pre><code>&lt;ul className=&quot;colorLists&quot;&gt;
                    {COLOR_LISTS.map(color =&gt; {
                      return (
                        &lt;li className=&quot;colorLayout&quot; title=&quot;베이지&quot;&gt;
                          &lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot;&gt;&lt;/input&gt;
                          &lt;label
                            for=&quot;checkbox&quot;
                            style={{ backgroundColor: color.colorProps }}
                          &gt;&lt;/label&gt;
                          &lt;span className=&quot;productColor&quot;&gt;{color.color_name}&lt;/span&gt;
                        &lt;/li&gt;
                      );
                    })}
                  &lt;/ul&gt;
  </code></pre>