ฉันจะมีคอลัมน์ความกว้างคงที่สองคอลัมน์พร้อมคอลัมน์ยืดหยุ่นหนึ่งคอลัมน์ได้อย่างไร

ฉันกำลังพยายามตั้งค่ารูปแบบ 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/

แทนที่จะใช้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: 1การตั้งค่าเริ่มต้นของภาชนะดิ้นเป็น นั่นเป็นสาเหตุที่ทำให้คอลัมน์ของคุณหดตัวลง

ไม่สำคัญว่าคุณระบุความกว้างเท่าใด ( อาจเป็นได้width: 10000px ) ด้วยflex-shrinkความกว้างที่ระบุสามารถละเว้นได้และรายการที่ยืดหยุ่นจะถูกป้องกันไม่ให้ล้นคอนเทนเนอร์

ฉันกำลังตั้งค่า flexbox ด้วย 3 คอลัมน์ที่คอลัมน์ด้านซ้ายและขวามีความกว้างคงที่ ...

คุณจะต้องปิดการใช้งานการหดตัว นี่คือตัวเลือกบางส่วน:

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

หรือ

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

หรือตามที่แนะนำโดย spec:

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

7.2 องค์ประกอบของความยืดหยุ่น

ผู้เขียนมีการส่งเสริมให้มีความยืดหยุ่นในการควบคุมการใช้flexชวเลขมากกว่าที่มีคุณสมบัติตัวหนังสือโดยตรงเป็นชวเลขได้อย่างถูกต้องรีเซ็ตส่วนประกอบใด ๆ ที่ไม่ได้ระบุเพื่อรองรับการใช้งานร่วมกัน

รายละเอียดเพิ่มเติมที่นี่: อะไรคือความแตกต่างระหว่างความยืดหยุ่นพื้นฐานและความกว้าง?

สิ่งเพิ่มเติมที่ฉันต้องทำคือซ่อนคอลัมน์ด้านขวาตามการโต้ตอบของผู้ใช้ในกรณีนี้คอลัมน์ด้านซ้ายจะยังคงความกว้างคงที่ แต่คอลัมน์กลางจะเติมส่วนที่เหลือของพื้นที่

ลองสิ่งนี้:

.center { flex: 1; }

สิ่งนี้จะช่วยให้คอลัมน์กลางใช้พื้นที่ว่างรวมถึงพื้นที่ของพี่น้องเมื่อถูกลบ

ซอแก้ไขแล้ว

ความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าสามารถทำการลากได้ดังนั้นขอคำแนะนำ

หากนั่นไม่ใช่ปัญหาให้ไปข้างหน้า เรียกใช้ตัวอย่าง ไปที่การดูหน้าเต็มและปรับขนาด ศูนย์จะปรับขนาดตัวเองโดยไม่มีการเปลี่ยนแปลง Divs ด้านซ้ายหรือขวา

เปลี่ยนค่าซ้ายและขวาเพื่อตอบสนองความต้องการของคุณ

ขอบคุณ.

หวังว่านี่จะช่วยได้

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