semantic UI 사이드 바에있는 버튼을 아래로 당기기

Question

semantic-ui를 사용하여 사이드 바를 레이아웃하고 있습니다.

다음 예제에서는 positioning:absolute을 사용하여 아래쪽으로 밀린 버튼이있는 사이드 바를 보여줍니다. 커스텀 스타일을 필요로하지 않으면 서 의미 론적으로 이것을 배열하는 이상적인 방법이 있습니까? 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