гибкие списки flexbox для столбцов и сетки

Question

Я не могу понять, как центрировать списки для небольших устройств. он не остается в центре, всегда есть дополнительный пробел, я использовал text-align CSS, и он все еще не работал. я думаю, что мой подход к созданию адаптивных столбцов неправильный. Я также попробовал гибкую пленку, но это не помогло.

body {
  font-family: Nunito, sans-serif;
  color: rgba(0, 0, 0, .8);
  font-weight: 400;
  line-height: 1.4;
}

@font-face {
  font-family: "selawk";
  src: url("css/fonts/selwak.ttf");
}

a:hover {
  border-bottom: 3px solid #364067;
}

img {
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.45rem
}

h1 {
  font-size: 2.25rem
}

h1,
h2 {
  padding: 0;
  margin: 0 0 1.45rem;
  color: inherit;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  line-height: 1.1;
  font-family: 'selawk', Arial, sans-serif;
}

h2 {
  font-size: 1.62671rem
}

h3 {
  font-size: 1.38316rem
}

h3,
h4 {
  padding: 0;
  margin: 0 0 1.45rem;
  color: inherit;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  line-height: 1.1
}

h4 {
  font-size: 1rem
}

@media only screen and (max-width: 3000px) and (min-width: 768px) {
  .wriaper {
    text-align: left;
  }
  .wriaper ul {
    display: flex;
    padding: 1px;
    list-style: none;
    justify-content: center;
  }
  .wriaper li {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin: 60px;
    border-radius: 10px;
  }
  .eature-icon {
    text-align: center;
    padding-top: 50px;
    margin-top: 50px;
  }
  .spp {
    text-align: center;
    color: #1B7E61;
  }
  /* Animation */
  @keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
  }
  .animatedFadeInUp {
    opacity: 0;
  }
  .fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 768px) {
  ul {
    padding: 1px;
    list-style: none;
    justify-content: center;
  }
  li {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin-inline: 250px;
    border-radius: 26px;
    list-style: none;
  }
  /* Animation */
  @keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
  }
  .animatedFadeInUp {
    opacity: 0;
  }
  .fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
  .feature-item {
    display: flex;
    margin-bottom: 60px
  }
  .feature-icon {
    background: linear-gradient(135deg, #ad2ab9, #ff618c);
    width: 50px;
    flex-basis: 50px;
    flex-shrink: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 15px
  }
  .feature-icon>svg {
    display: block
  }
  .eature-icon {
    text-align: center;
    padding-top: 50px;
    margin-top: 50px;
  }
  .spp {
    text-align: center;
    color: #1B7E61;
  }
  .fonrt {
    margin-top: 10px;
  }
}

<h1>Testing font</h1>
<div class="animated animatedFadeInUp fadeInUp">
  <div class="wriaper">
    <ul>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
    </ul>
  </div>

Answer 1

Вы можете использовать div вместо ul / li и выполнять позиционирование с помощью flexbox.

В зависимости от стиля вы можете использовать медиазапросы для изменения направления flex от столбца к строке

https://jsfiddle.net/wf5n8yrx/

index. html

<body>
  <h1>Testing font</h1>
  <div class="">
    <div class="wriaper">
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
    </div>
  </div>
</body>

main. css

  .wriaper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .wriaper .eature-item {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .eature-icon {
    text-align: center;
  }
  .spp {
    text-align: center;
    color: #1b7e61;
  }

  @media only screen and (min-width: 768px) {
    .wriaper {
      flex-direction: row;
      justify-content: center;
    }
  }

Answer 2

Поскольку вы уже используете flexbox, вы можете достичь желаемых результатов с меньшим количеством кода и вообще без @media.

Я добавил заметки во фрагмент:

       @font-face { /* should be the first */
        font-family: "selawk";
        src: url("css/fonts/selwak.ttf");
       }
       *, /* should be second */
       *::after,
       *::before {
         box-sizing: border-box;
       }
    body {
        font-family: Nunito,sans-serif;
        color:rgba(0,0,0,.8);
        font-weight:400;
        line-height: 1.4;
       }
        
       a:hover {
        border-bottom: 3px solid #364067;
       }
    
       img {
        max-width:100%;
        padding:0;
        margin:0 0 1.45rem
       }
       h1 {
        font-size:2.25rem
       }
       h1,
       h2 {
        padding:0;
        margin:0 0 1.45rem;
        color:inherit;
        font-weight:700;
        text-rendering:optimizeLegibility;
        line-height:1.1;
        font-family: 'selawk', Arial, sans-serif;
       }
       h2 {
        font-size:1.62671rem
       }
       h3 {
        font-size:1.38316rem
       }
       h3,
       h4 {
        padding:0;
        margin:0 0 1.45rem;
        color:inherit;
        font-weight:700;
        text-rendering:optimizeLegibility;
        line-height:1.1
       }
       h4 {
        font-size:1rem
       }

.wriaper ul { 
  display: flex;
  height: 100%;  
  flex-flow: row wrap; 
  justify-content: space-between;
  align-items: center;
  width: 75%;
  min-width: 200px; /* limit it to children wanted width */
  margin: auto; /* center it */
/* override default style */
  padding: 0;   
  list-style: none; 
}
    
.wriaper li {
  background-color: rgba(180, 236, 219, 0.52);
  flex: 1 200px; /* limit size of children */
  margin: 60px 10px; /* seperate from each other */
  border-radius: 10px;
  overflow: hidden; 
}

.eature-icon { 
  text-align:center;
  margin: 50px auto;
}
.spp{
  text-align: center;
  color: #1B7E61;
  margin-bottom: 50px;
}

            /* Animation */
    
            @keyframes fadeInUp {
                from {
                    -webkit-transform: translate3d(0, 40px, 0);
                    transform: translate3d(0, 40px, 0);
                }
    
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1;
                }
            }
    
            @-webkit-keyframes fadeInUp {
                from {
                    -webkit-transform: translate3d(0, 40px, 0);
                    transform: translate3d(0, 40px, 0);
                }
    
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1;
                }
            }
    
            .animated {
                animation-duration: 1s;
                animation-fill-mode: both;
                -webkit-animation-duration: 1s;
                -webkit-animation-fill-mode: both;
            }
    
            .animatedFadeInUp {
                opacity: 0;
            }
    
            .fadeInUp {
                opacity: 0;
                animation-name: fadeInUp;
                -webkit-animation-name: fadeInUp;
            }

        <h1>Testing font</h1>
        <div class="animated animatedFadeInUp fadeInUp">
            <div class="wriaper">
                <ul>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                </ul>
    
    
    
            </div>

Answer 3

vh и vw будут работать для изменения размера в зависимости от области просмотра.

vh и vw обозначают высоту и ширину области просмотра.

Ваш файл css может использовать это таким образом ...

div
{
  height: 50vh;

}