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


315

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/


Odpowiedzi:


631

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

14
W bieżącej implementacji (przynajmniej w Chrome) musisz także upewnić się, że środkowa kolumna została flex-growzdefiniowana (jak powiedzmy 1). Zaktualizowano skrzypce .
baseten

2
dlaczego po prostu szerokość nie działa? i potrzebuję flex: 0 0 230px ;?
Rodrigo Ruiz,

3
flex-grow: 1jest nadal potrzebny do kolumny płynu w Chrome 53. W przeciwnym razie nie zajmowałby reszty szerokości. Przypuszczam, że odpowiedź powinna uwzględniać ten fakt.
thybzi

8
Dla każdego, kto nadal jest zdezorientowany, flex: 0 0 200pxdziała tak samo jak width: 200px; flex-shrink: 0.
bryc

3
Skopiowałem tutaj skrzypce na wypadek, gdyby Rudie je zgubił: jsfiddle.net/133rr51u
TylerH

53

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


Dzięki dodaniu flex: 1;do centrum divwystarczyło.
DIES

4

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.