小编Cak*_*ers的帖子

控制理由内容中的空间量:

我想知道如何证明justify-content: space-betweenflexbox 允许有多少空间。

目前,我的项目之间是有间隔的,但是它们之间的空间太大了,我希望它们之间只有一点空间,以便它们可以连续摆在中间。

下面的代码片段有望阐明我正在努力解决的问题。

让我知道您是否需要我进一步澄清。谢谢!

#qwrapper {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.row {
  flex: 0 auto;
  height: 100px;
  margin: 0;
}
#lighticon {
  padding-bottom: 30px;
}
@media (max-width: 800px) {
  #qwrapper {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 480px) {
  #qwrapper {
    flex-wrap: wrap;
  }
  .row {}
}
@media only screen and (min-width: 760px) {
  #qwrapper {
    justify-content: space-between;
    margin: 10px;
  }
  #lighticon {
    position: relative; …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

5
推荐指数
1
解决办法
1万
查看次数

行包中心在flexbox中对齐

目前我正在尝试使用flexbox将我的列设置为中心,但是当我调整浏览器大小时它会粘在左侧.我已经尝试过对齐内容中心和对齐项目中心,但我可能不会将它们放在正确的位置.如果有人知道如何解决这个问题将非常感激!谢谢!

.wrap{
	display:flex;
}

main{
	flex:1;
	display:flex;
}

aside, article{
    padding:2em;	
}

aside{
	flex:1;
}

article{
	flex:1;
}

@media (max-width: 800px) {
  main {
    flex-direction: column;
  }
}
Run Code Online (Sandbox Code Playgroud)
<div class="wrap">
    <main>
        <aside>
            <h1>Do You Want to...</h1>
            <ul>
                <li>Rebrand myself online</li>
                <li>Take my current website and make it modern</li>
                <li>Find a way to make information more accessible for customers</li>
                <li> Improve customer service</li>
                <li> Reach a wider range of people</li>
            </ul>
        </aside>
        <article>
            <h1>Do You Want to...</h1>
            <ul>
                <li>Create forms and …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×2

flexbox ×2

html ×2

css3 ×1