방법은 아래를 참조 제공 <code>flexbox mixin</code>가있는 FortyTwo 기반-테마에서 내가 <a href="https://www.drupal.org/project/fortytwo" rel="nofollow noreferrer">Drupal FortyTwo theme.</a>을 사용하고 테마

Question

에 의해 제공이 말대꾸 인 flexbox 믹스 인을 사용합니다. 이 믹스 인을 어떻게 사용하는지 알아낼 수 없습니까? 예전 테마에는 이 부분 :

#my-block { 
    html.flexbox & { 
    @include flex; 
    @include bvp(flex-direction, column); 
    } 
    div.content { 
    html.flexbox & { 
     @include bvp(flex, 1); 
    } 
    position: relative; 
    } 
} 

또한 bvp mixin을 제거해야합니다. 위의 flexbox mixins를 사용하여 flexbox을 적절한 방법으로 추가하려면 어떻게합니까?

Answer 1

본 것처럼, 우리는 일련의 믹스 인을 가지고 있습니다.

마지막 코드 인 은이 가장 유용 할 수 있지만 코드 펜을 가지고 놀아 보았을 때 실제로 제대로 작동하는지 확신 할 수 없습니다. 그리고 다른 것들은 특별히 도움이되지 않습니다.

예를 들어, @mixin flex-order은 우리가 전달하는 숫자와 함께 order flexbox 속성을 단순히 뱉어내는 것을 볼 수 있습니다.

그래서이 :

#my-box { 
    @include flex-order(2); 
} 

출력이 : 그냥 order가 아니라 정확히 당신이 할 수만큼 당신을 도움이되지 것, 항목 플렉스에 관한 것을 시각적 알림을 원하는 잘하지 않는

#my-box { 
    order: 2; 
} 

을 처음에 SCSS에서 쉽게 완료된 order: 2입니다.

flex-align, flex-grow, flex-shrink 및 flex-child과 같은 내용이 적용됩니다.

단일 속성 mixins가 유용하지 않고 마지막 mixin이 깨진 것 같아서 SCSS에서 필요에 따라 flex 속성을 지정하고 필요할 경우 flex-flow mixin을 사용하는 것이 좋습니다. 가요 성 포장 용과 플렉스 방향 하나 플렉스 흐름 @mixin

는

 

flex-flow 인 flexbox 속성은 두 개의 값이 필요하다. 믹스 인에서는 단축형 속성을 두 개의 개별 속성으로 출력하거나, 하나의 속성 만 전달하면 잘못된 CSS 규칙으로 끝나지 않는 방식으로 전달하는 속성 만 출력합니다.

그래서이 :

#my-box { 
    @include flex-flow(wrap, column); 
} 
#my-other-box { 
    @include flex-flow(wrap); 
} 

출력이 :

#my-box { 
    flex-wrap: wrap; 
    flex-direction: column; 
} 
#my-other-box { 
    flex-wrap: wrap; 
} 

두 허용되는 CSS 규칙이 그런 식으로.실제로 flex-flow 속성을 사용 그렇지 않으면, 당신은 얻을 것이다 :

#my-box { 
    flex-flow: wrap column; /* invalid; flex-direction must come first */ 
} 
#my-other-box { 
    flex-flow: wrap; /* invalid; missing flex-direction */ 
} 

 

최종 예를

bvp 믹스 인을 제거하고 개인을 지정한 후, 다음과 같이 보일 수 귀하의 최종 SCSS 필자가 처음에 권장 한 것처럼 믹스 인이없는 플렉스 속성.

#my-block { 
    html.flexbox & { 
    @include flex-flow(row, wrap); 
    align-items: center; 
    justify-content: center; 
    } 
    div.content { 
    html.flexbox & { 
     flex: 1 0 auto;   
    } 
    position: relative; 
    } 
}