어떻게 하면 중앙에 유연한 기둥이 하나 있는 고정 폭 기둥 두 개를 가질 수 있습니까?

어떻게 하면 중앙에 유연한 기둥이 하나 있는 고정 폭 기둥 두 개를 가질 수 있습니까?

저는 왼쪽과 오른쪽 기둥의 너비가 고정되어 있고 중앙 기둥이 플렉스 되어 있는 세 개의 기둥으로 플렉스박스 레이아웃을 설정하려고 합니다.

열에 대한 치수를 설정하더라도 창이 줄어들면 여전히 축소되는 것으로 보입니다.

이걸 어떻게 하는지 아는 사람?

추가로 해야 할 일은 사용자 상호 작용에 따라 오른쪽 열을 숨기는 것입니다. 이 경우 왼쪽 열은 여전히 고정된 너비를 유지하지만 중앙 열은 나머지 공간을 채웁니다.

#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/

사용하는 대신width(flexbox를 사용할 때 권장되는 사항) 를 사용할 수 있습니다.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지정된 너비를 무시할 수 있으며 플렉스 항목이 컨테이너에 오버플로되는 것을 방지할 수 있습니다.

왼쪽과 오른쪽 기둥의 폭이 고정된 3개의 기둥으로 플렉스박스를 설정하려고 합니다.

축소를 비활성화해야 합니다.다음은 몇 가지 옵션입니다.

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

오어

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

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

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

7.2. 유연성의 구성요소

저자는 다음을 사용하여 유연성을 제어할 것을 권장합니다.flex일반적인 용도에 맞게 지정되지 않은 구성 요소를 올바르게 재설정하기 때문에, 속기는 직접적으로 긴 손 속성을 사용하는 것이 아니라 속기를 사용합니다.

자세한 내용은 다음과 같습니다.플렉스 베이스와 폭의 차이점은 무엇입니까?

추가로 해야 할 일은 사용자 상호 작용에 따라 오른쪽 열을 숨기는 것입니다. 이 경우 왼쪽 열은 여전히 고정된 너비를 유지하지만 중앙 열은 나머지 공간을 채웁니다.

시도해 보기:

.center { flex: 1; }

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

수정된 바이올린

오래된 브라우저와의 호환성은 걸림돌이 될 수 있으므로 주의하시기 바랍니다.

그것이 문제가 아니라면 계속하세요.토막글을 실행합니다.전체 페이지 보기로 이동하고 크기를 조정합니다.왼쪽 또는 오른쪽 눈금이 변경되지 않고 가운데 크기가 조정됩니다.

요구사항에 맞게 좌우 값을 변경합니다.

감사해요.

도움이 되길 바랍니다.

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

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

언급URL : https://stackoverflow.com/questions/23794713/how-can-i-have-two-fixed-width-columns-with-one-flexible-column-in-the-center