Sample Code

Flexboxでぷちはまり

OK!!

Logo

.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    border-bottom: 1px solid #ccc;
}
.flex-between{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}                        
                    

Bad…

疑似要素before

Logo

.before{
    @extend .flex;
    @extend .flex-between;
}
.before:before{
    content: '';
    display: table;
    clear: both;
}
                    

疑似要素after

Logo

.after{
    @extend .flex;
    @extend .flex-between;
}
.after:after{
    content: '';
    display: table;
    clear: both;
}