文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox justify-内容:空格；不工作..？

问Flexbox justify-内容:空格；不工作..？
EN

Stack Overflow用户

提问于 2020-06-15 11:08:27

回答 2查看 56关注 0票数 0

我正在尝试创建一些博客站点布局，但这里的问题是我不能在内容和侧边栏之间留出空间。我应用了flexbox，但justify-content不起作用。我不知道为什么，我用的是最新的chrome浏览器。

我附上了下面的代码，我面临着justify-content的问题。请帮我解决我在这里缺少的东西。

* {
      box-sizing: border-box;
  }
  /* .homepage {
      display: flex;
      flex-direction: column;
  } */

  .top-poster {
      background-color: yellow;
      color: red;
  }

  .header {
      background-color: steelblue;
      color: snow;
  }

  .top-navigation {
      background-color: black;
      color: whitesmoke;
  }

  .main-content {
      display: flex;
      justify-content: space-around;
      /* align-content: space-around; */
      /* margin: 20px; */
      /* padding: 20px; */
  }

  .content {
      border: 2px solid red;
      padding: 20px;
      /* order: 2; */
  }

  .right-sidebar {
      background-color: khaki;
      border: 2px solid red;
      /* order: 1; */
  }

  .fakeimg {
      background-color: gray;
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Codings</title>
   
</head>

<body>
    <div class="homepage">
        <div class="top-poster">your add will show here</div>
        <div class="header">
            <h2>Blog Codings</h2>
        </div>
        <div class="top-navigation">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Learn</a></li>
                <li><a href="">Articles</a></li>
                <li><a href="">Dummy</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="content">
                <h2>TITLE HEADING</h2>
                <h5>Title description, Dec 7, 2017</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                <br>
                <h2>TITLE HEADING</h2>
                <h5>Title description, Sep 2, 2017</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
            <div class="right-sidebar">
                <h2>About Me</h2>
                <h5>Photo of me:</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
                <h3>More Text</h3>
                <p>Lorem ipsum dolor sit ame.</p>
                <div class="fakeimg" style="height:60px;">Image</div><br>
                <div class="fakeimg" style="height:60px;">Image</div><br>
                <div class="fakeimg" style="height:60px;">Image</div>
            </div>
        </div>
        <div class="footer">
            <h2>@Copywrite to BlogCodings.com</h2>
        </div>
    </div>

</body>

</html>

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-15 11:15:31

justify-content: space-between不会自动在元素之间添加边距。您需要手动指定元素之间的边距。下面是一个例子：

.main-content > *:not(:first-child) {
    margin-left: 20px;
}

* {
    box-sizing: border-box;
}
/* .homepage {
    display: flex;
    flex-direction: column;
} */

.top-poster {
    background-color: yellow;
    color: red;
}

.header {
    background-color: steelblue;
    color: snow;
}

.top-navigation {
    background-color: black;
    color: whitesmoke;
}

.main-content {
    display: flex;
}

.content {
    border: 2px solid red;
    padding: 20px;
    /* order: 2; */
}

.right-sidebar {
    background-color: khaki;
    border: 2px solid red;
    /* order: 1; */
}

.fakeimg {
    background-color: gray;
}

.main-content > *:not(:first-child) {
    margin-left: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Codings</title>
   
</head>

<body>
    <div class="homepage">
        <div class="top-poster">your add will show here</div>
        <div class="header">
            <h2>Blog Codings</h2>
        </div>
        <div class="top-navigation">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Learn</a></li>
                <li><a href="">Articles</a></li>
                <li><a href="">Dummy</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="content">
                <h2>TITLE HEADING</h2>
                <h5>Title description, Dec 7, 2017</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                <br>
                <h2>TITLE HEADING</h2>
                <h5>Title description, Sep 2, 2017</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
            <div class="right-sidebar">
                <h2>About Me</h2>
                <h5>Photo of me:</h5>
                <div class="fakeimg" style="height:200px;">Image</div>
                <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
                <h3>More Text</h3>
                <p>Lorem ipsum dolor sit ame.</p>
                <div class="fakeimg" style="height:60px;">Image</div><br>
                <div class="fakeimg" style="height:60px;">Image</div><br>
                <div class="fakeimg" style="height:60px;">Image</div>
            </div>
        </div>
        <div class="footer">
            <h2>@Copywrite to BlogCodings.com</h2>
        </div>
    </div>

</body>

</html>

票数 2

Stack Overflow用户

发布于 2020-06-15 12:12:47

用于水平排列子项的Flexbox justify-content属性。但是为了水平控制子元素的流动，你必须在子项上设置flex-basis或width，然后在你控制水平流动并使用justify-content属性之后。我看到你的CSS，你没有设置你的子项的width或flex-basis属性，因此justify-content不起作用。根据需要添加width，并使用justify-content: flex-start/flex-end/center/space-around/space-between。

.content {
    border: 2px solid red;
    padding: 20px;
    width:600px;
    /* order: 2; */
}

.right-sidebar {
    background-color: khaki;
    border: 2px solid red;
    width:200px;
    /* order: 1; */
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62380733

复制

相似问题

问Flexbox justify-内容:空格；不工作..？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox justify-内容:空格；不工作..？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox justify-内容:空格；不工作..？
EN