Jak mogę mieć dwie kolumny o stałej szerokości z jedną elastyczną kolumną pośrodku?

Próbuję skonfigurować układ Flexbox z trzema kolumnami, w których lewa i prawa kolumna mają stałą szerokość, a środkowa kolumna wygina się, aby wypełnić dostępną przestrzeń.

Pomimo ustawienia wymiarów kolumn nadal wydają się kurczyć, gdy okno się kurczy.

Czy ktoś wie, jak to osiągnąć?

Dodatkową rzeczą, którą muszę zrobić, jest ukrycie prawej kolumny na podstawie interakcji użytkownika, w którym to przypadku lewa kolumna nadal zachowałaby stałą szerokość, ale środkowa kolumna wypełniłaby resztę przestrzeni.

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

Oto JSFiddle: http://jsfiddle.net/zDd2g/185/

Zamiast używać width(co jest sugestią przy korzystaniu z Flexboksa), możesz użyć flex: 0 0 230px;co oznacza:

• 0= nie rosnąć (skrót od flex-grow)
• 0= nie zmniejszaj się (skrót od flex-shrink)
• 230px= start o 230px(skrót od flex-basis)

co oznacza: zawsze bądź 230px.

Zobacz skrzypce , dzięki @TylerH

Aha, i nie potrzebne justify-contenti align-itemstutaj.

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

Pomimo ustawienia wymiarów kolumn nadal wydają się kurczyć, gdy okno się kurczy.

Początkowe ustawienie elastycznego pojemnika to flex-shrink: 1. Dlatego twoje kolumny się kurczą.

Nie ma znaczenia, jaką szerokość określisz ( może byćwidth: 10000px ), przy flex-shrinkokreślonej szerokości można zignorować, a elementy elastyczne nie przepełnią kontenera.

Próbuję skonfigurować Flexbox z 3 kolumnami, w których lewa i prawa kolumna mają stałą szerokość ...

Musisz wyłączyć zmniejszanie. Oto kilka opcji:

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

LUB

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

LUB, zgodnie z zaleceniami specyfikacji:

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

7.2 Składniki elastyczności

Autorzy są zachęcani do kontrolowania elastyczności za pomocą flexstenografii, a nie bezpośrednio z jej właściwościami długodystansowymi, ponieważ stenografia poprawnie resetuje nieokreślone komponenty, aby uwzględnić typowe zastosowania .

Więcej informacji tutaj: Jakie są różnice między podstawą elastyczną a szerokością?

Dodatkową rzeczą, którą muszę zrobić, jest ukrycie prawej kolumny na podstawie interakcji użytkownika, w którym to przypadku lewa kolumna nadal zachowałaby stałą szerokość, ale środkowa kolumna wypełniłaby resztę przestrzeni.

Spróbuj tego:

.center { flex: 1; }

Umożliwi to środkowej kolumnie zajęcie dostępnego miejsca, w tym miejsca jego rodzeństwa, gdy zostaną usunięte.

Zmienione skrzypce

Kompatybilność ze starszymi przeglądarkami może być trudna, więc radzę.

Jeśli to nie jest problem, śmiało. Uruchom fragment kodu. Przejdź do pełnego widoku strony i zmień rozmiar. Centrum zmieni rozmiar bez żadnych zmian dla lewego lub prawego div.

Zmień lewą i prawą wartość, aby spełnić Twoje wymagania.

Dziękuję Ci.

Mam nadzieję że to pomoże.

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