가운데에 하나의 유연한 열이있는 두 개의 고정 너비 열을 어떻게 가질 수 있습니까?

왼쪽 및 오른쪽 열의 너비가 고정되어 있고 가운데 열이 사용 가능한 공간을 채우기 위해 구부러지는 3 개의 열로 flexbox 레이아웃을 설정하려고합니다.

열의 치수를 설정했지만 창이 줄어들면서 열이 계속 줄어 듭니다.

아무도 이것을 달성하는 방법을 알고 있습니까?

추가 작업은 사용자 상호 작용에 따라 오른쪽 열을 숨기는 것입니다.이 경우 왼쪽 열은 여전히 ​​고정 너비를 유지하지만 가운데 열은 나머지 공간을 채 웁니다.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}

<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

JSFiddle은 다음과 같습니다. http://jsfiddle.net/zDd2g/185/

widthflexbox를 사용할 때 제안하는 대신 사용 flex: 0 0 230px;하는 방법은 다음과 같습니다.

• 0= 자라지 않는다 (약칭 flex-grow)
• 0= 축소하지 않음 (의 약어 flex-shrink)
• 230px=에서 시작 230px(약칭 flex-basis)

즉 : 항상 230px.

@TylerH 덕분에 바이올린을 보십시오.

아, 그리고 당신은 필요하지 않습니다 justify-content와 align-items여기.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

열의 치수를 설정했지만 창이 줄어들면서 열이 계속 줄어 듭니다.

플렉스 컨테이너의 초기 설정은입니다 flex-shrink: 1. 그렇기 때문에 컬럼이 줄어들고 있습니다.

당신이 (지정 선폭이 중요하지 않습니다 이 될 수width: 10000px 로) flex-shrink지정된 폭이 무시 될 수 있으며, 플렉스 항목이 컨테이너를 범람 방지 할 수있다.

왼쪽 및 오른쪽 열의 너비가 고정 된 3 개의 열로 flexbox를 설정하려고합니다 ...

축소를 비활성화해야합니다. 몇 가지 옵션이 있습니다.

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

또는

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

또는 사양에서 권장하는대로 :

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2. 유연성의 구성 요소

flex속기 는 일반적인 용도 에 맞게 지정되지 않은 구성 요소를 올바르게 재설정하기 때문에, 속기 속성을 사용 하지 않고 속기를 사용하여 유연성을 제어하는 ​​것이 좋습니다 .

자세한 내용은 여기 : flex-basis와 width의 차이점은 무엇입니까?

추가 작업은 사용자 상호 작용에 따라 오른쪽 열을 숨기는 것입니다.이 경우 왼쪽 열은 여전히 ​​고정 너비를 유지하지만 가운데 열은 나머지 공간을 채 웁니다.

이 시도:

.center { flex: 1; }

이렇게하면 중앙 기둥이 제거 될 때 형제의 공간을 포함하여 사용 가능한 공간을 사용할 수 있습니다.

수정 된 바이올린

구형 브라우저와의 호환성은 드래그가 될 수 있으므로 조언을 받으십시오.

이것이 문제가되지 않으면 계속 진행하십시오. 스 니펫을 실행하십시오. 전체 페이지보기로 이동하여 크기를 조정하십시오. 센터는 왼쪽 또는 오른쪽 div를 변경하지 않고 자체 크기를 조정합니다.

요구 사항에 맞게 왼쪽 및 오른쪽 값을 변경하십시오.

감사합니다.

도움이 되었기를 바랍니다.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>