时间戳

首页 > 解决方案 > Flexbox justify-content: space-around; 不工作..？

html - Flexbox justify-content: space-around; 不工作..？

问题描述

我正在尝试创建一些博客站点布局，但这里的问题是我无法在内容和侧边栏之间留出空间。我申请了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>

标签： htmlcssflexbox

解决方案

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>

推荐阅读