Bagaimana saya bisa membuat flexbox ini diperluas dengan item fleksibelnya? [duplikat]

Dalam kode contoh saya, klik tombol Hasilkan Konten untuk memahami masalahnya.

Setelah Anda mengklik tombol tersebut, Anda dapat melihat semua item fleksibel (.each-result) dihasilkan. Mereka hampir seluruhnya dibungkus oleh div/flexbox (.result-container), ditandai dengan batas titik-titik biru. Jika saya menghapus margin dari item fleksibel, itu sangat cocok dengan div. Namun, ketika saya menambahkan margin, div induk (yaitu flexbox) tidak meluas hingga lebar penuhnya; lebarnya tetap sama seperti saat tidak ada margin.

Apakah ada cara untuk mengubahnya sehingga div meluas saat menambahkan margin?

const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
  rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
  console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
  for (let i = 0; i < 10; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("each-result");
    newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
    rootDiv.appendChild(newDiv);  
  }
  rootDiv.firstElementChild.classList.add('nav-margin');
  navMargin = document.querySelector('.nav-margin');
});

//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
//   leftArrow.addEventListener('click', () => {
 
//   });
// rightArrow.addEventListener('click', () => {
//   if ()
//   });
// }




//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
  const newImg = document.createElement("img");
  newImg.setAttribute("src", url);
  return newImg;
}
html, body {
  height: 100%;
}

button {
  position: relative;
  z-index: 1
  width: auto;
  height: 50px;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 15%;
  z-index: 0
}

.each-result {
  height: 150px;
  width: 150px;
  border: 3px dotted red;
  margin: 0 1%;
}
img {
  height: 100%;
  width: auto;
}
.nav-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  position: absolute;
  background: clear;
  pointer-events: none;
}

#left-arrow, #right-arrow {
  pointer-events: auto;
}

#root-container {
  display: flex;
  align-items: center;
  border: 1px solid black;
  height: 200px;
  position: relative;
  flex-flow: row no-wrap;
/*   overflow: hidden; */
  width: 100%;
}

.result-container {
  display: flex;
  border: 2px blue dotted;
  
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
  <div class="nav-arrows">
      <button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
      </button>
        <button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
      </button>
    </div>
  <div id="root-container">
  <div id="root" class="result-container">
  </div>
  </div>

</div>
<button id="button-generate">Generate Content</button>


javascript html css flexbox
person WonkasWilly    schedule 25.02.2018    source sumber
comment
Seperti yang disarankan oleh korban penipuan, yang Anda perlukan hanyalah mis. gunakan unit area pandang alih-alih persen untuk margin, margin: 0 1vw.   -  person Ason    schedule 25.02.2018
comment
Menambahkan margin: 0 1vw; tidak memberikan hasil yang diinginkan.   -  person Brett DeWoody    schedule 25.02.2018
comment
Menggunakan unit Viewport pasti berhasil. Saya juga menghargai jawaban Anda yang lain.   -  person WonkasWilly    schedule 25.02.2018
comment
@BrettDeWoody Tentu saja (dan begitulah kata OP). Dalam hal ini 1% diambil dari induk, yang memiliki lebar viewport penuh, dan dengan itu 1% = 1 vw.   -  person Ason    schedule 26.02.2018
comment
Setuju untuk tidak setuju @LGSon. Dengan 1vw jaraknya tidak sama.   -  person Brett DeWoody    schedule 26.02.2018
comment
@BrettDeWoody Maksud Anda dalam kasus di atas, di mana 1% tidak menghasilkan jarak yang sama seperti 1vw?   -  person Ason    schedule 26.02.2018
comment
@BrettDeWoody Atau maksud Anda 1% elemen yang mengambil 100% area pandang tidak sama dengan 1vw?   -  person Ason    schedule 26.02.2018
comment
Yang pertama - 1vw tidak memberikan hasil yang sama seperti 1%.   -  person Brett DeWoody    schedule 26.02.2018
comment
@BrettDeWoody Tepatnya...dan duplikatnya menjelaskan alasannya, dan dalam kasus ini, jika induk mengambil lebar area pandang penuh, 1% dalam pengaturan non-fleksibel akan sama dengan 1vw, maka 1vw dapat digunakan untuk mencapai diinginkan keluaran.   -  person Ason    schedule 27.02.2018

Jawaban (1)


arrow_upward
0
arrow_downward

Jika margin dapat berupa nilai tetap (bukan persen), kita dapat calc() lebar elemen untuk memperhitungkan margin. Misalnya, jika kita menginginkan margin 20px kita akan melakukan hal berikut pada elemen .each-result:

.each-result {
  width: calc(10% + 20px);
  margin: 0 20px;
}

Inilah demo yang berfungsi:

const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
  rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
  console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
  for (let i = 0; i < 10; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("each-result");
    newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
    rootDiv.appendChild(newDiv);  
  }
  rootDiv.firstElementChild.classList.add('nav-margin');
  navMargin = document.querySelector('.nav-margin');
});

//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
//   leftArrow.addEventListener('click', () => {
 
//   });
// rightArrow.addEventListener('click', () => {
//   if ()
//   });
// }




//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
  const newImg = document.createElement("img");
  newImg.setAttribute("src", url);
  return newImg;
}
html, body {
  height: 100%;
}

button {
  position: relative;
  z-index: 1
  width: auto;
  height: 50px;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 15%;
  z-index: 0
}

.each-result {
  height: 150px;
  width: calc(10% + 20px);
  margin: 0 20px;
  border: 3px dotted red;
}

img {
  height: 100%;
  width: auto;
}
.nav-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  position: absolute;
  background: clear;
  pointer-events: none;
}

#left-arrow, #right-arrow {
  pointer-events: auto;
}

#root-container {
  display: flex;
  align-items: center;
  border: 1px solid black;
  height: 200px;
  position: relative;
  flex-flow: row no-wrap;
/*   overflow: hidden; */
  width: 100%;
}

.result-container {
  display: flex;
  border: 2px blue dotted;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
  <div class="nav-arrows">
      <button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
      </button>
        <button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
      </button>
    </div>
  <div id="root-container">
  <div id="root" class="result-container">
  </div>
  </div>

</div>
<button id="button-generate">Generate Content</button>

person Brett DeWoody    schedule 25.02.2018
comment
Sama sekali tidak ada alasan untuk mulai mengotak-atik calc();, ini sepenuhnya terkait dengan masalah saat menggunakan persen pada anak-anak fleksibel, jadi saya menutup ini sebagai duplikat. - person Ason; 25.02.2018