0

I am trying to make this as an example to learn:

https://i.ibb.co/m4qJmQz/image.png

my code doesn't center the boxes.How can I make it better?

I want to learn how to

**center vertically the columns' content **add space between gray ">" and texts - apply space-around or space-between 's space amount, so apply automatic space; not padding or margin

my html file:

http://elementor.help.helvatica.com/flexbox.html

code:

<html>
  <head>
    <title>The Flexbox Example - Murat Deniz</title>
    <meta content="">
    <style></style>
  </head>
  <body>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .icon {
      background-color: gray;
      color: saddlebrown;
      width: 100%;
      text-align: center;
      height: fit-content;
    }
    .sub-container {
      border-color: gainsboro;
      border-radius: 5px;
      border-style: solid;
      box-shadow: 0px 0px 30px 0px gainsboro;
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 100%;

    }
    li {
      flex-direction: row;
      display: flex;

    }
    ul {
      padding-inline-start: unset;
    }
    .inline {
      flex-direction: row;
      display: flex;
    }
    .inline li:nth-child(3) {
      align-content: flex-end;
      color: red;
    }
    .main-container {
     /** display: flex;
      justify-content: space-around;
      align-items: center; **/
      height: 50%;
    }
    .section {
      height: 100%;
    }
  </style>
  <div class="main-container">
  <div class="container">
    <div class="section">
      <p>Artboard</p>
      <div class="sub-container">
        <ul>
          <li>
        <div class="icon">
          >
        </div>
        <div class="text">
          video
        </div>
          </li>
          <li>
        <div class="icon">

        </div>
        <div class="text">
          photo
        </div>
          </li>
          <li>
            <div class="icon">
              >
            </div>
            <div class="text">
              video
            </div>
          </li>
          <li>
            <div class="icon">
              >
            </div>
            <div class="text">
              video
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section">
      <p>Artboard Copy</p>
      <div class="sub-container">
        <ul class="inline">
          <li>
            <div class="icon">
              >
            </div>
            <div class="text">
              video
            </div>
          </li>
          <li>
            <div class="icon">
            </div>
            <div class="text">
              photo
            </div>
          </li>
          <li>
            <div class="icon">
              >
            </div>
            <div class="text">
              video
            </div>
          </li>
          <li>
            <div class="icon">
              >
            </div>
            <div class="text">
              video
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
  </body>
</html>
Jeffry Jquery
  • 11
  • 4

1 Answers1

0

I think you can't put in-between space without using margin or padding as you are using 100% width. When you talk about automatic space you mean to use relative units of measure like .em or .vw

JMP M3dia
  • 24
  • 3