Разрыв между элементами и упаковка не соответствует - PullRequest
Новая
       28

Разрыв между элементами и упаковка не соответствует

1 голос
/ 03 мая 2020

У меня есть страница, где левый и правый разделены равномерно. На правой стороне у меня есть группа div элементов, содержащих img и span. То, что я пытаюсь сделать, это показать четыре из этих div элементов по MOST в строке и начать перенос на меньшие экраны с указанным c пробелом.

Проблема, с которой я столкнулся, на больших экранах зазор шире, и элементы уменьшают sh на меньших экранах вместо переноса, независимо от того, какое значение зазора я установил.

Вот рисунок, показывающий, что происходит: https://gfycat.com/remorsefulglossyherring

Вот соответствующий HTML (только правая часть страницы, которая содержит эти элементы): 

<div
  class="about"
  fxFlex="50%"
  fxLayout="row wrap"
  fxLayoutGap="10px grid"
  fxLayoutAlign="center center"
>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/c-sharp.png" alt="C#" />
    <span class="caption">C#</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/.net-core.png" alt=".NET Core" />
    <span class="caption">.NET Core</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/wpf.png" alt="WPF" />
    <span class="caption">WPF</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/winforms.jpg" alt="WinForms" />
    <span class="caption">WinForms</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/angular.png" alt="Angular" />
    <span class="caption">Angular</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/nodejs.png" alt="NodeJS" />
    <span class="caption">Node.js</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/html5.png" alt="HTML5" />
    <span class="caption">HTML5</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/css3.png" alt="CSS3" />
    <span class="caption">CSS3</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/mongodb.png" alt="MongoDB" />
    <span class="caption">MongoDB</span>
  </div>
  <div fxFlex="25%" class="item">
    <img
      class="img-skills"
      src="assets/mssql.png"
      alt="Microsoft SQL Server"
    />
    <span class="caption">Microsoft SQL Server</span>
  </div>
</div>

Вот css: 

.about {
  min-height: 100vh;
  justify-content: center;
  height: 100%;
}

div.item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 120px;
}

.img-skills {
  width: 100px;
  height: 100px;
  background-color: grey;
}

.caption {
  display: block;
}

Ответы [ 2 ]

2 голосов
/ 03 мая 2020

Это простая идея, но она поможет вам наверняка начать с:

Поиграйте здесь: скрипка 

.MainDiv {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.first {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background-color: gray;
  margin: 5px;
}
<div class="MainDiv">
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
</div>
0 голосов
/ 03 мая 2020

Сделайте так, чтобы оба левых и правых делителя были разделены основным контейнером.

Ваш правый боковой элемент должен быть таким, как показано ниже. 

 <div fxLayout="row" fxLayoutGap="20px">
     <div>1. One</div> 
     <div>2. Two</div> 
      <div>3. Three</div> 
      <div>4. Four</div>
</div>
...