如何在保持項目居中的同時更改彈性列寬

Question

我的 HTML 中有一個 flexbox，我有兩列。 我遇到的麻煩是更改右列的寬度。 如果我將寬度設置為width: 50% ，則.container不再以頁面為中心，並且 Google 地圖的大小也會更改。 我正在嘗試縮小.container大小，但保持整個 flexbox 以頁面為中心，並且地圖的大小相同。 任何幫助將不勝感激。

 #google-maps { background: #FFFFFF; }.hours-and-location { } #hours-and-location-container { display: flex; flex-direction: row; justify-content: center; margin: 3em; width: 50%; }.column { display: flex; flex-direction: column; margin: 1em; }.locations { width: 100%; }.page-title-header { text-align: center; }

 <h1 class="page-title-header"> Hours and Locations </h1> <div id="hours-and-location-container"> <iframe class="column" id="google-maps" src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F" width="600" height="500"> </iframe> <div class="hours-and-location"> <div class="locations column"> <h2> Locations </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed elementum tempus egestas sed. </p> <p> Lectus quam id leo in vitae turpis massa sed. </p> <p> Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor nec feugiat nisl. </p> </div> <div class="hours"> </div> </div> </div>

Answer 1

我想你正在尋找這個

 #google-maps { background: #FFFFFF; }.hours-and-location { width:40vh } #hours-and-location-container { display: flex; flex-direction: row; justify-content: center; align-items:center; margin: 3em; }.column { margin: 1em; }.page-title-header { text-align: center; }

 <h1 class="page-title-header"> Hours and Locations </h1> <div id="hours-and-location-container"> <iframe class="column" id="google-maps" src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F" width="600" height="500"> </iframe> <div class="hours-and-location"> <div class="locations column"> <h2> Locations </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed elementum tempus egestas sed. </p> <p> Lectus quam id leo in vitae turpis massa sed. </p> <p> Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor nec feugiat nisl. </p> </div> <div class="hours"> </div> </div> </div>

Answer 2

你可以在你的 flex div 上分配一個最大寬度，然后將它們包裝在另一個 div 中，控制它們的中心，如下所示。

 #google-maps { background: #FFFFFF; }.hours-and-location { } #hours-and-location-container { display: flex; flex-direction: row; justify-content: center; margin: 3em; max-width: 700px; gap: 10px; }.wrapper { display:flex; justify-content: center; }.column { display: flex; flex-direction: column; margin: 1em; }.locations { width: 100%; }.page-title-header { text-align: center; }

 <h1 class="page-title-header"> Hours and Locations </h1> <div class="wrapper"> <div id="hours-and-location-container"> <iframe class="column" id="google-maps" src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F" width="600" height="500"> </iframe> <div class="hours-and-location"> <div class="locations column"> <h2> Locations </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed elementum tempus egestas sed. </p> <p> Lectus quam id leo in vitae turpis massa sed. </p> <p> Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor nec feugiat nisl. </p> </div> <div class="hours"> </div> </div> </div> </div>

Answer 3

好吧，我給了margin: 0 auto; 為了使它從左到右以任何寬度居中，它總是需要元素從左到右居中。 我希望這可能會有所幫助，或者您正在尋找其他東西？

 #google-maps { background: #FFFFFF; }.hours-and-location { } #hours-and-location-container { display: flex; flex-direction: row; justify-content: center; margin: 3em; width: 50%; margin: 0 auto; }.column { display: flex; flex-direction: column; margin: 1em; }.locations { width: 100%; }.page-title-header { text-align: center; }

 <h1 class="page-title-header"> Hours and Locations </h1> <div id="hours-and-location-container"> <iframe class="column" id="google-maps" src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F" width="600" height="500"> </iframe> <div class="hours-and-location"> <div class="locations column"> <h2> Locations </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed elementum tempus egestas sed. </p> <p> Lectus quam id leo in vitae turpis massa sed. </p> <p> Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor nec feugiat nisl. </p> </div> <div class="hours"> </div> </div> </div>