У меня есть flexbox с двумя группами элементов, одна для лайков и избранных, другая для обмена в социальных сетях. Я хочу, чтобы первый был на левом конце, а правый - на другом. Я хочу использовать justify-content: space-between для этого, но элементы остаются фиксированными в той же позиции. Я мог бы использовать хак, сдвигая элементы, используя padding-left, но я бы скорее использовал justify-content, только он не работает. Некоторые предложения приветствуются, спасибо. Вот скриншот того, как это в настоящее время выглядит (красные стрелки показывают, где должны быть 2 группы), ниже того, где я разместил код.
HTML:
<div class="flexBox flexItem">
<div class="summary">
<div class="flexBox flexItem test">
<ul class="details">
<li><strong>Days until harvest:</strong> {{seedDetails.growthTime}}</li>
<li><strong>Required sun exposure:</strong> {{sunExposure}}</li>
<li><strong>Plant height:</strong> {{seedDetails.plantHeight | measure : distancePipeArgument : true}}</li>
<li><strong>Plant width:</strong> 15 inch</li>
</ul>
<ul class="details">
<li><strong>Germinates after:</strong> 14 days</li>
<li><strong>Germination temperature:</strong> {{seedDetails.growthTemperature | measure: temperaturePipeArgument : true}}</li>
<li><strong>Row spacing:</strong> {{seedDetails.rowSpacing | measure : distancePipeArgument : true}}</li>
<li><strong>Plant spacing:</strong> {{seedDetails.plantSpacing | measure : distancePipeArgument : true}}</li>
</ul>
<ul class="details">
<li><strong>Sow depth:</strong> {{seedDetails.sowDepth | measure : distancePipeArgument : true}}</li>
<li><strong>Life cycle:</strong> {{seedDetails.lifeCycleType | titlecase}}</li>
<li><strong>Hardy at:</strong> {{seedDetails.hardiness | measure: temperaturePipeArgument : true}}</li>
<li><strong>Maximum temperature:</strong> {{seedDetails.maximumTemperature | measure: temperaturePipeArgument : true}}</li>
</ul>
</div>
<div class="soils">
<ul>
<li class="inline"><strong>This plant grows well in:</strong></li><li class="inline">
<mat-chip-list>
<mat-chip style="margin-right:8px; background-color:aquamarine;" *ngFor="let soilType of soilTypes" [selectable]="selectable" (click)="showDialog(soilType)">
{{soilType}}
</mat-chip>
</mat-chip-list></li>
</ul>
</div>
</div>
<figure class="carousel">
<div class="crop shadow">
<input type="image" [src]="seedDetails.imagePreview" class="thumbnail" (click)="showDialog(image)"/>
</div>
<small>Click to view full image</small>
</figure>
</div>
<div class="flexBox social">
<div class="buttons">
<button mat-icon-button color="basic" aria-label="flag comment">
<mat-icon aria-role="billing name">
thumb_up</mat-icon>
</button>
<button mat-icon-button color="basic" aria-label="flag comment">
<mat-icon aria-role="billing name">
thumb_down</mat-icon>
</button>
<button mat-icon-button color="basic" aria-label="flag comment">
<mat-icon aria-role="billing name">
star</mat-icon>
</button>
</div>
<div>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-vk"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-weibo"></a>
<a href="#" class="fa fa-reddit"></a>
</div>
</div>
<mat-divider></mat-divider>
CSS:
.flexItem {
max-width: 1100px;
}
.flexBox{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
ul.details{
margin-left: 0px;
padding-left: 0px;
flex: 1 1 300px;
}
.inline{
display: inline-block;
}
.soils{
align-items: flex-start;
}
.summary{
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items: flex-start;
/* justify-content: flex-start;
text-align: left; */
width:85%;
/* align-items: flex-start; */
/* border: solid grey 1; */
}
.carousel{
width: 250px;
height: 250px;
/* overflow:hidden; */
background-color: gray;
flex: 1 1 250px;
/* margin-left: 0px; */
}
.crop{
width: 250px;
height: 250px;
overflow:hidden;
}
.shadow{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
border: 0.5px solid black;
}
.test{
width:850px;
/* border: solid black; */
}
.fa {
/* padding: 40px; */
border-right: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
height: 40px;
width:40px;
font-size: 24px;
color:#B0B0B0;
/* width: 50px; */
text-align: center;
vertical-align: bottom;
/* align-items:center; */
line-height: 1.6em;
text-decoration: none;
/* margin: 5px 2px; */
}
.fa:hover {
color: #22B14C;
}
.social{
width: 90%;
justify-content: space-between;
}