Блог

Главная - Вопросы по программированию - Использовал гибкую коробку для выравнивания при запуске, все в порядке, но ее нельзя центрировать

Использовал гибкую коробку для выравнивания при запуске, все в порядке, но ее нельзя центрировать

#html #css

Вопрос:

Код работает нормально . Проблема, с которой я сталкиваюсь, заключается в выравнивании .
Я искал много вопросов в SO, но тщетно.

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

Я хочу выровнять deviceCardFlex в center теле (это решает мою проблему, но когда есть дополнительные карты, например, только 1 слева внизу, они также выравниваются center ).

Когда я пытаюсь использовать flex-start (это решает мою проблему с нижней картой, например, 1 карта, оставленная внизу, выровняется left , но весь контейнер deviceCardFlex не center выровнен) .
Я пытался использовать margins , но они должны быть изменены при каждом изменении screen size . Я знаю @media , что это только для этой цели, но возможно ли это без этого.

Я пробовал space-arround , space-between чтобы между картами оставалось свободное пространство, но проблема с нижней картой сохраняется

 /*.deviceCardFlex1 {
  display: flex;
  justify-content: center;
}*/

.deviceCardFlex {
  display: flex;
  flex-wrap: wrap;
  padding-left: auto;
  padding-right: auto;
  justify-content: flex-start;
}

.deviceCard {
  position: relative;
  /* float: left; */
  width: 300px;
  height: fit-content;
  margin: 2% 2%;
  padding: 0 1% 1%;
  border: 2px solid rgb(126, 126, 126);
  border-radius: 5px;
  background-color: white;
  transition: 0.3s;
} 
 <!--<div class="deviceCardFlex1">-->
  <div class="deviceCardFlex">
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
    <div class="deviceCard">
      <h3 class="deviceCardHead">Lenova Yoga Laptop Pro</h3>
      <ul class="deviceCardData">
        <li>Windows 11</li>
        <li> 8GB Ram</li>
        <li>1TB SSD</li>
        <li>Intel Core i7 (11th Gen)</li>
        <li>NVIDIA GeForce GTX 1050</li>
        <li>15.6 inch Full HD Display</li>
        <li> Dolby Audio</li>
        <li>1 Year Onsite Warranty</li>
      </ul>
    </div>
  </div>
<!--</div>-->

Комментарии:

1. Итак, вы хотите выровнять сами карты «deviceCard»? или их родительский «deviceCardFlex»? спрашиваю, потому что ты написал именно эти 2 строки >>> Я хочу выровнять карты по центру в приведенном ниже фрагменте // Я хочу выровнять deviceCardFlex по центру корпуса

2. Я хочу выровнять по центру deviceCardFlex

3. с нижней картой, выровненной слева

4. Центрирование только по горизонтали элемента уровня блока (вашего div.deviceCardFlex): пожалуйста, попробуйте установить ширину (например width: 500px; ) и поля, как это margin: 0 auto:

5. Дополнительно position: relative или float: left не имеют никакого эффекта (я думаю) , потому что div.deviceCard-это гибкий элемент

Ответ №1:

Коробка DeviceCardflex уже занимает всю ширину корпуса, вы можете проверить это, придав ей цвет фона.

Что действительно касается вас, так это предоставить дочерним полям соответствующее соотношение ширины родительской ширины, чтобы они были выровнены по центру с помощью flex свойства.

Просто попробуйте обновить свой стиль с помощью следующего кода

 .deviceCard {
    position: relative;
    /* float: left; */
    width: 300px;
    height: fit-content;
    margin: 2% 2%;
    padding: 0 1% 1%;
    border: 2px solid rgb(126, 126, 126);
    border-radius: 5px;
    background-color: white;
    transition: 0.3s;
    flex: 0 0 21%;
}
/*.deviceCardFlex1 {
  display: flex;
  justify-content: center;
}*/

.deviceCardFlex {
  display: flex;
  flex-wrap: wrap;
  padding-left: auto;
  padding-right: auto;
  justify-content: flex-start;
}

.deviceCard {
  position: relative;
  /* float: left; */
  width: 300px;
  height: fit-content;
  margin: 2% 2%;
  padding: 0 1% 1%;
  border: 2px solid rgb(126, 126, 126);
  border-radius: 5px;
  background-color: white;
  transition: 0.3s;
  flex: 0 0 21%;
}

@media (max-width: 776px){
  .deviceCard {
    flex: 0 0 48%;
    margin: 2% 1%;
  }
}

@media (max-width: 500px){
  .deviceCard {
    flex: 0 0 90%;
    margin: 2% auto;
  }
}

Наслаждайтесь!

Комментарии:

1. Это решит проблему . Я вижу, что с width помощью также это можно решить . Можете ли вы рассказать о flex собственности, которой вы наконец-то воспользовались

2. Спасибо ,также можно ли решить проблему, не меняя width или flex

3. Рад помочь. свойство flex касается трех факторов, и они находятся в порядке роста и сжатия, а также основы коробки чайлда внутри контейнера flex, поэтому мы меняем последний фактор, который является основой flex, чтобы придать нашему дизайну соответствующую компоновку.вы можете узнать об этом подробнее, перейдя по ссылке . Желаю вам всего наилучшего!

4. Можно ли решить проблему без изменения width или flex собственности . Знайте, что @media это только для этой цели . Но возможно ли это

5. Ответ также обновляется с помощью мультимедийных запросов, и нет другого способа, с помощью которого факторы свойств flex могут решить такую проблему стиля flexbox, вы не можете управлять обоснованием содержимого start flext и одновременно автоматически заполнять дочерние поля.

Ответ №2:

Итак, поскольку вы хотите, чтобы элемент «deviceCardFlex» был выровнен по центру как по оси x, так и по оси y, а родителем этого элемента является само тело. Вы можете либо написать следующий css в само тело, либо в родительский файл, обернутый вокруг deviceCardFlex

 Parentof_deviceCardFlex {
display:flex;
align-items:center;
justify-content:center;
}

Комментарии:

1. Я попробовал это и прокомментированный фрагмент кода, о котором идет речь, но он не работает

2. Пожалуйста, покажите больше HTML / CSS родительского элемента deviceCardFlex

3. @ckoala «Parentof_deviceCardFlex» — это просто имя-заполнитель для любого элемента, который он собирался сделать родителем «deviceCardFlex», будь то тело или другой элемент, обернутый вокруг элемента «deviceCardFlex», как я уже упоминал.

4. @Ахмед, Извини, мой комментарий должен был быть адресован Ране. Я ценю ваш ответ!

5. @ckoala он находится непосредственно в теле, содержащем только карты

Ответ №3:

Просто просто

 .deviceCardFlex {
   ...
   flex-direction: column;
   align-items: center;

}

введите описание изображения здесь

Комментарии:

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

Метки: , ,