Пространство вокруг не работает в гибкой коробке в CSS - PullRequest
Новая
       37

Пространство вокруг не работает в гибкой коробке в CSS

0 голосов
/ 25 мая 2020

Я пытаюсь создать раздел функций страницы с двумя строками и двумя столбцами для каждой строки, используя flex. Я связал ожидаемый результат и свой фактический результат ниже. Я также прикрепил свои фрагменты кода.

Извините, если это кажется очень простым и глупым. Я учусь самостоятельно и впервые в жизни создаю страницу без чьего-либо руководства.

Ожидаемый результат: https://imgur.com/8tEVrQc Фактический выход : https://i.imgur.com/bwsMu8r.png

Я пробовал transform, чтобы сделать его центром, но это не кажется правильным вариантом решения этой простой проблемы. Извините, если это звучит глупо.

HTML: 

<section class="flexbox">

            <div class="left-side column">
               <div class="one column-container">
                <img class="feature-img" src="images/icon-access-anywhere.svg" alt="icon 1">
                <h3>
                    Access your files, anywhere
                </h3>
                <p class="features-para">  The ability to use a smartphone, tablet, or computer to access your account means your 
                    files follow you everywhere</p>
               </div>
               <div class="two column-container">
                <img class="feature-img" src="images/icon-security.svg" alt="icon 2">
                <h3>
                    Security you can trust
                </h3>
                <p class="features-para">2-factor authentication and user-controlled encryption are just a couple of the security 
                    features we allow to help secure your files.</p>

               </div>
            </div>
            <div class="right-side column">
                <div class="three column-container">
                    <img class="feature-img" src="images/icon-collaboration.svg" alt="icon 3">
                    <h3>
                    Real-time collaboration
                </h3>
                <p class="features-para">Securely share files and folders with friends, family and colleagues for live collaboration. 
                    No email attachments required.</p>
            </div>
                <div class="four column-container">
                    <img class="feature-img" src="images/icon-any-file.svg" alt="icon 4">
                    <h3>
                        Store any type of file
                    </h3>
                    <p class="features-para">  Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all 
                        file types to be securely stored and shared.</p>
                </div>

            </div>


    </section>

CSS: 

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: space-around;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

Ответы [ 2 ]

0 голосов
/ 25 мая 2020

Я не уверен, действительно ли ваш фрагмент содержит все необходимые детали проблемы c ситуации, но если вы добавите max-width к .column (измените значение по желанию) и text-align: center; ко всем его дочерним элементам (используя .column * в качестве селектора), он отображает по желанию: 

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: space-around;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 240px;
  
}
.column * {
  text-align: center;
}
<section class="flexbox">

  <div class="left-side column">
    <div class="one column-container">
      <img class="feature-img" src="images/icon-access-anywhere.svg" alt="icon 1">
      <h3>
        Access your files, anywhere
      </h3>
      <p class="features-para"> The ability to use a smartphone, tablet, or computer to access your account means your files follow you everywhere</p>
    </div>
    <div class="two column-container">
      <img class="feature-img" src="images/icon-security.svg" alt="icon 2">
      <h3>
        Security you can trust
      </h3>
      <p class="features-para">2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.</p>

    </div>
  </div>
  <div class="right-side column">
    <div class="three column-container">
      <img class="feature-img" src="images/icon-collaboration.svg" alt="icon 3">
      <h3>
        Real-time collaboration
      </h3>
      <p class="features-para">Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.</p>
    </div>
    <div class="four column-container">
      <img class="feature-img" src="images/icon-any-file.svg" alt="icon 4">
      <h3>
        Store any type of file
      </h3>
      <p class="features-para"> Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared.</p>
    </div>

  </div>


</section>
0 голосов
/ 25 мая 2020

Я бы решил эту ситуацию, центрировав margin: 0 auto и установив указанную c ширину контейнера (во фрагменте этого примера с 600px). В будущем этот контейнер можно будет использовать для других блоков и модифицировать с помощью медиа-запросов. 

.flexbox {
  width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: space-around;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}
<section class="flexbox">
  <div class="left-side column">
    <div class="one column-container">
      <img class="feature-img" src="images/icon-access-anywhere.svg" alt="icon 1">
      <h3>
        Access your files, anywhere
      </h3>
      <p class="features-para"> The ability to use a smartphone, tablet, or computer to access your account means your
        files follow you everywhere</p>
    </div>
    <div class="two column-container">
      <img class="feature-img" src="images/icon-security.svg" alt="icon 2">
      <h3>
        Security you can trust
      </h3>
      <p class="features-para">2-factor authentication and user-controlled encryption are just a couple of the security
        features we allow to help secure your files.</p>

    </div>
  </div>
  <div class="right-side column">
    <div class="three column-container">
      <img class="feature-img" src="images/icon-collaboration.svg" alt="icon 3">
      <h3>
        Real-time collaboration
      </h3>
      <p class="features-para">Securely share files and folders with friends, family and colleagues for live collaboration.
        No email attachments required.</p>
    </div>
    <div class="four column-container">
      <img class="feature-img" src="images/icon-any-file.svg" alt="icon 4">
      <h3>
        Store any type of file
      </h3>
      <p class="features-para"> Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all
        file types to be securely stored and shared.</p>
    </div>
  </div>
</section>
...