CSS 플렉스박스를 이용한 고정폭 컬럼 설정하는 방법

CSS 플렉스박스를 이용한 고정폭 컬럼 설정하는 방법

저는 빨간색 상자가 나란히 표시될 때 너비가 25mm에 불과하기를 원합니다. 저는 이 미디어 쿼리 내에서 CSS를 설정하여 이를 달성하려고 합니다.

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

대상:

.flexbox .red {
  width: 25em;
}

하지만 그럴 때면 이런 일이 벌어집니다.

코드펜: http://codepen.io/anon/pen/RPNpaP .

내가 뭘 잘못했는지 알아요?

다음을 사용해야 합니다.flex또는flex-basis보다 재산.widthMDN에 대해 자세히 알아보십시오.

.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>

---

코드에 따라 업데이트된 코드 펜을 참조하십시오.

응답 가능한 백분율(%)의 플렉스 박스를 원하는 사용자는 미디어 쿼리가 훨씬 쉽습니다.

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%;
}

실제로 너비 CSS 속성을 사용하려면 다음을 적용해야 합니다.

.flexbox .red {
  width: 100%;
  max-width: 25em;
}

언급URL : https://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox