1. 首页
  2. 问答
  3. 使用flexbox之间的空间

使用flexbox之间的空间

2017-07-28 40 views
0

我有4块，我需要使用flexbox添加空间，如下面的屏幕截图所示：screenshot。使用flexbox之间的空间

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 athi

回答

5

可以使用柔性盒财产证明的内容。 看到这个---： 

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content:space-between; 
 
} 
 

 
.block { 
 
\t 
 
    width: 40%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 09:32:36

+0

这比我的更好，如果你寻找一个不那么hacky的方法，但不太精确控制之间的差距列。 – beerwin

+0

是的，你是对的@ beerwin –

0

变化block的width:50%到width:49%工作

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 
.block { 
 
    width: 49%; 
 

 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 09:29:38 Bhargav

+0

我只需要在列之间的空间。 – athi

0 

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    /* changed the width to 45% and added auto margin */ 
 
    width: 45%; 
 
    margin:auto; 
 
    
 
} 
 
.right{ 
 
margin-right:0px; 
 
} 
 
.left{ 
 
margin-left:0px; 
 
}
<div class="container"> 
 
    <div class="block left"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block left"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

试试这个

来源

2017-07-28 09:31:35 M0ns1f

+0

右侧有空间。我只需要在两者之间的空间。 – athi

+0

@athi我删除了右边缘请upvote并使其作为解决，如果你有你需要的东西 – M0ns1f

0

请试试这个代码。这里您需要要求减小block的宽度并将padding-right添加到block类。

.block { 
    width: 48%; 
    padding-right: 2%; 
}

希望这会有所帮助。

来源

2017-07-28 09:32:48

0

我加了一个无形的div与space类，恢复50％的div至45％，给了space 5％

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 45%; 
 
} 
 
.space { 
 
width: 5%;
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 09:33:21 Zabusy

0

您可以使用justify-content: space-around或justify-content: space-between如果你想添加空间块之间。

或者你也可以减少你的块大小一样，

.block { 
    width: 40%; 
    margin: 0 2.5% 
} 


.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 

 
} 
 

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 09:33:41

0

这是一个有点棘手，但并非不可能。使用填充而不是边距。 无论您有多少物品，这都可以工作。唯一的限制是只有2列。

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 50%; 
 
    box-sizing: border-box; /*Set the box sizing to include paddings and borders into the width calculation*/ 
 
} 
 

 
.block:nth-child(odd) { 
 
    padding-right: 10px; /*Add right padding for odd items (left side)*/ 
 
} 
 

 
.block:nth-child(even) { 
 
    padding-left: 10px; /*Add left padding to even items (right side)*/ 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

来源

2017-07-28 09:34:27 beerwin

1

添加justify-content:space-between;您.container 我认为这将解决这个问题！谢谢。

来源

2017-07-28 09:39:03

相关问题

 相关问题