потянув кнопку на дно в семантической боковой панели ui

Question

Я использую семантический-ui для компоновки боковой панели.

В следующем примере показана боковая панель с кнопкой, сдвинутой вниз, с помощью positioning:absolute. Есть ли идеотический способ организовать это в семантике-ui без необходимости создания пользовательских стилей? Класс bottom не применяется к кнопкам.

<div class="ui very thin styled sidebar active"> 
    <div class="ui fluid vertical icon buttons"> 
    <div class="ui facebook button"> 
     <i class="facebook icon"></i> 
    </div> 
    <div class="ui twitter button"> 
     <i class="twitter icon"></i> 
    </div> 
    <div class="ui google plus button"> 
     <i class="google plus icon"></i> 
    </div> 
    <div class="ui repeat button" style="position:absolute;bottom:10px;"> 
     <i class="reorder icon"></i> 
    </div> 
    </div> 
</div> 

Answer 1

Кажется, что нет родной semantic-ui (v2.2.2 <) означает, чтобы сделать это.

Вы можете разместить кнопку повтора в нижней части боковой панели, добавив в flexbox контейнер:

.flex-container { 
    display: flex; 
    justify-content: space-between; 
    height: 100%; 
} 

, а затем groupping кнопки социальных медиа в одном дочернем элементе (со стилями по умолчанию), и кнопкаповторить в другом:

.bottom-aligned { 
    margin: 0px; 
    margin-top: auto; 
} 

JSFiddle example