Блог

Главная - Вопросы по программированию - не применяется право дочернего поля flexbox

не применяется право дочернего поля flexbox

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

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

смотрите демонстрацию ниже

 .flex {
  display: flex;
  background: pink;
  width: 80px;
  overflow: auto;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}  
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ответ №1:

добавьте другой родительский div и укажите переполнение для родительского div. Для .flex класса применяется display:inline-flex; , тогда он будет работать 

 .flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: flex;
  background: pink;
  min-width:100%;
  float:left;
}
  

 .flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: inline-flex;
  background: pink;
  /*min-width:100%;
  float:left;*/
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}  
 <div class="flex-parent">
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

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

1. встроенный flex лучше, чем комбинирование float и flex

2. @TemaniAfif Я пытался, но это не сработало, поэтому я добавил float

3. @TemaniAfif да, это работает, я думал, ты пробовал без родительского div. Хорошо, я изменю ответ

Ответ №2:

 .flex {
  display: flex;
  background: pink;
  width: 200px;
  overflow: auto;
justify-content: space-between;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
}  
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>