flexbox-我不知道是什么導致這個div在flexbox中有一個被遮擋的空間-有解無憂

如果有人可以幫助我解決導致我的#header-content 中出現這個紫色遮擋框的原因，我們將不勝感激。

在此處輸入影像描述

#header {
    background-color: #343c63;
    height: 400px;
   
}

.main-nav {
    display: flex;
    padding: 0px 100px 0px 100px;
    list-style: none;
}


.main-nav li:first-child {
    margin-right: auto;
}

.main-nav a {
    margin: 10px;
    color: white;
    text-decoration: none;
}

#header-content {
   display: flex;
  
   padding-top: 100px;
   padding-left: 100px;
   padding-right: 100px;
}

#image-1 {
 margin-right: 100px;
  
}

<html>
    <head>
        <title>top-flex-box</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
    </head>
   
    <body>
        
        <div id="header">
        <nav>
            <ul class="main-nav">
                <li><a href="#" class="logo">Header Logo</a></li>
                
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                
            </ul>
        </nav>
            
            <div id="header-content">
                <div>
                <h1>This website is awesome</h1>
                <p>This website has some subtext that goes here under the main title. It's smaller font and the color is lower contrast.</p>
                </div>
                
                <div id='image-1'>
                    <p>this is a placeholder for an image</p>
                </div>
            </div>
            
        </div>
        
        
        
    </body>
</html>

uj5u.com熱心網友回復：

[已編輯]

紫色封閉框是默認的 flex-box 行為，它可以防止 flex-box 變得比它的內容小。

它可以通過以下方式解決：

1 .您通過使用 inline-block 洗掉紫色阻塞框

#header-content {
     display: inline-flex;
     padding-top: 100px;
     padding-left: 100px;
     padding-right: 100px;
  }

display:inline-flex不會使彈性專案行內顯示。它使 flex 容器行內顯示。和之間的主要區別在于display: flex，display: inline-flex這display: inline-flex將使 flex 容器成為行內元素，而其內容保持其 flexbox 屬性。

通過提供完整的屬性來控制孩子的例如：

#header-content {
  display: flex;
  padding-top: 100px;
  padding-left: 100px;
  padding-right: 100px;
}
    
#image-1 {
  width: 50vw;
  margin-right: 100px;
}

使用justify-content屬性控制紫色遮光框

  #header-content {
    display: flex;
    justify-content: space-between;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495884.html

標籤：html css 网络弹性盒

上一篇：僅關注Tab按鍵上定義了“tabindex”屬性的元素

下一篇：ExcelPowerQuery“外部表不是預期的格式。”