CSS flexbox로 고정 너비 열을 설정하는 방법

CodePen : http://codepen.io/anon/pen/RPNpaP .

빨간색 상자가 나란히있을 때 너비가 25 em 밖에되지 않기를 원합니다.이 미디어 쿼리 안에 CSS를 설정하여이를 달성하려고합니다.

@media all and (min-width: 811px) {...}

에:

.flexbox .red {
  width: 25em;
}

그러나 그렇게하면이 일이 발생합니다 :

http://i.imgur.com/niFBrwt.png

내가 뭘 잘못하고 있는지 알아?

대신 flex또는 flex-basis속성을 사용해야합니다 width. MDN 에 대해 자세히 알아보십시오 .

.flexbox .red {
  flex: 0 0 25em;
}

flexCSS 속성은 사용 가능한 공간을 채우기 위해 그 크기를 변경할 수 플렉스 항목의 수를 지정하는 약식 속성이다. 그것은 포함합니다 :

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

간단한 데모는 첫 번째 열을 50px고정 너비 로 설정하는 방법을 보여줍니다 .

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

코드를 기반으로 업데이트 된 코드 펜을 참조하십시오 .

누구든지 백분율 (%)로 반응 형 flexbox를 원한다면 미디어 쿼리가 훨씬 쉽습니다.

flex-basis: 25%;

테스트 할 때 훨씬 매끄 럽습니다.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}