时间戳

首页 > 解决方案 > 弹性项目之间的空间

html - 弹性项目之间的空间

问题描述

我目前正在尝试学习 flex box，但我的知识不足以让我知道在 Google 或 Stack 上搜索什么。

我希望第一个元素“stock”与 flex 容器左对齐，最后一个社交媒体图标右对齐。

我需要在股票列表和第一个社交媒体图标之间留出空间，然后在每个社交图标之间留一点空间。

图像示例

.flex-container {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 
 #flex-items {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-end;
 background-color: orange;
 }
 
 .stock {
 margin-right: auto;
 background-color: #6dc993;
 display: flex;
 border: 2px solid blue;
 flex-grow: 1;
 }
 
 .stock > p {
 margin-left: 5%;
 display: flex;
 align-self: center;
 font-size: 20px;
 color: white;
 height: 20%;
 }
<div class="flex-container">
<div id="flex-items">
<div class="stock"><p>Stock List</p></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
</div>
</div>

标签： htmlcssflexbox

解决方案

您可以在此代码笔中找到解决方案 

.flex-container {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 
 #flex-items {
 display: flex;
 justify-content: flex-start;
 background-color: orange;
 }
.socialWrapper {
  display: flex;
}
 
 .stock {
 margin-right: auto;
 background-color: #6dc993;
 display: flex;
 width: 40%;
 border: 2px solid blue;
 }
 
 .stock > p {
 margin-left: 5%;
 display: flex;
 align-self: center;
 font-size: 20px;
 color: white;
 height: 20%;
 }

.icon-wrap {
  margin-left:5px;
}
.icon-wrap img {
  height: 100%;
}
<div class="flex-container">
  <div id="flex-items">
    <div class="stock"><p>Stock List</p></div>
    <div class="socialWrapper">
      <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
      <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
      <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
      <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
      <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div>
    </div>
  </div>
</div>

推荐阅读