堆棧內存溢出
  簡體   English   中英

如何使用display = flex和flex-direction = row將div水平居中；

[英]How to horizontally center div with display = flex and flex-direction = row;

 原文  2018-12-28 16:22:09  0   1    html/ css/ css3/ flexbox

問題描述

我有一個內容div，其顯示為flex，而flex的方向為row。 在這個div中，我還有另外兩個div，一個div包含一個表單，另一個div也包含2張圖像。 我已經將第二個div的flex方向設置為列，並試圖將所有div置於頁面中間。 很抱歉，如果我解釋得不好，但希望以下代碼能解決這個問題！ 

 #content { display: flex; flex-direction: row; justify-content: center; } #col1 { width: 60%; border-radius: 5px; } #col2 { background: rgba(150, 143, 150, 0); width: 50%; height: auto; border-radius: 5px; } #col3 { background: rgba(150, 143, 150, 0); width: 50%; height: auto; } 
 <div id='content'> <div id='col1'> My form is here </div> <div style="flex-direction:column"> <div id='col2'> <img id='side1' src='https://via.placeholder.com/120'> </div> <div id='col3'> <img id='side2' src='https://via.placeholder.com/120'> </div> </div> </div>

預先感謝您的任何幫助

注意=我現在通過將col2和col3的寬度從50％更改為59vh來修復它。 不知道為什么不喜歡％。

1 個解決方案

解決方案1
 0  2019-01-02 10:39:17

您必須使用此代碼 

  #content{ background-color: #d2cbd2; /* for example */ width: 100%; height: auto; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } #col2{ display: flex; flex-flow:wrap row; } 
 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id='content'> <div id="col1"> My form is here </div> <div id="col2"> <div> <img src="i2.jpg"> </div> <div> <img src="i2.jpg"> </div> </div> </div> </body> </html>

在 a 中設置“width: auto”<div> 用“顯示：彎曲； flex-direction：行”不起作用</div><div id="text_translate"><p>我正在嘗試將一堆 div 並排放置，從左到右。 所以我使用 flexbox 方向設置為row 。</p><p> 我希望這些 div 中的每一個都從里面的內容中導出它們的高度和寬度，因此我將它們的高度和寬度保留為默認值。</p><p> 最后，我想使用 svg 作為背景。 為此，我使用了一個網格容器並將 svg 和 div 放置在同一列和同一行中，如此<a href="https://stackoverflow.com/a/51949049/9613633" rel="nofollow noreferrer">stackoverflow 帖子</a>中所建議的那樣。 我將 svg 的高度和寬度設置為100% ，以確保它填充整個背景。</p><p> 但是，當我將所有內容組合在一起時，div 的寬度設置不正確。 div 的高度似乎是由里面的內容設置的，但寬度似乎總是默認為300px 。 對於我的一生，我無法弄清楚這個寬度是如何計算的。 如果內容比300px寬，那么一切都按預期工作。 但是如果內容小於300px ，則容器永遠不會縮小以適應。</p><p> 如何確保 div 始終縮小以適應？ 請參閱下面的代碼示例： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> This div has calculated width 300px for some reason &lt;div class="top"&gt; &lt;div class="grid-container" key="1"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; ab &lt;/div&gt; &lt;/div&gt; &lt;,-- more grid-containers --&gt; &lt;/div&gt; This works as expected &lt;div class="top"&gt; &lt;div class="grid-container"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; abcdefghijkl &lt;/div&gt; &lt;/div&gt; &lt;!-- more grid-containers --&gt; &lt;/div&gt;</pre></div></div><p></p></div>

[英]Setting “width: auto” inside a <div> with “display: flex; flex-direction: row” doesn't work

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 JavaScript 中應用 display: flex 和 flex-direction: row？ 在 a 中設置“width: auto”<div> 用“顯示：彎曲； flex-direction：行”不起作用</div><div id="text_translate"><p>我正在嘗試將一堆 div 並排放置，從左到右。 所以我使用 flexbox 方向設置為row 。</p><p> 我希望這些 div 中的每一個都從里面的內容中導出它們的高度和寬度，因此我將它們的高度和寬度保留為默認值。</p><p> 最后，我想使用 svg 作為背景。 為此，我使用了一個網格容器並將 svg 和 div 放置在同一列和同一行中，如此<a href="https://stackoverflow.com/a/51949049/9613633" rel="nofollow noreferrer">stackoverflow 帖子</a>中所建議的那樣。 我將 svg 的高度和寬度設置為100% ，以確保它填充整個背景。</p><p> 但是，當我將所有內容組合在一起時，div 的寬度設置不正確。 div 的高度似乎是由里面的內容設置的，但寬度似乎總是默認為300px 。 對於我的一生，我無法弄清楚這個寬度是如何計算的。 如果內容比300px寬，那么一切都按預期工作。 但是如果內容小於300px ，則容器永遠不會縮小以適應。</p><p> 如何確保 div 始終縮小以適應？ 請參閱下面的代碼示例： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .top { padding: 20px; display: flex; flex-direction: row; }.grid-container { background-color: red; display: grid; }.svg { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }.content { grid-column: 1; grid-row: 1; font-size: 100px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> This div has calculated width 300px for some reason &lt;div class="top"&gt; &lt;div class="grid-container" key="1"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; ab &lt;/div&gt; &lt;/div&gt; &lt;,-- more grid-containers --&gt; &lt;/div&gt; This works as expected &lt;div class="top"&gt; &lt;div class="grid-container"&gt; &lt;svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none"&gt; &lt;polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" /&gt; &lt;/svg&gt; &lt;div class="content"&gt; abcdefghijkl &lt;/div&gt; &lt;/div&gt; &lt;!-- more grid-containers --&gt; &lt;/div&gt;</pre></div></div><p></p></div> 在 flex-direction: column 中顯示一行中的 flex 項 如何水平居中彎曲<div> ? 在顯示中設置時，Flex-basis不作為寬度：flex設置為flex-direction：row 如何使用 flex-direction: row 將項目按順序排列在行中； flex-direction行不表現為行 flexbox 內的彈性方向“行”和彈性方向“列” 是否可以覆蓋 flex-direction: row？ 如何修復 flex-direction: column 如何讓前兩個元素是行方向最后一列的 flex
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM