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

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

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

Ktoś wie jak to osiągnąć?

Dodatkową rzeczą, którą muszę zrobić, to ukryć prawą kolumnę w oparciu o interakcję z użytkownikiem, w którym to przypadku lewa kolumna nadal będzie zachowywała jego Stała 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/

Author: TylerH, 2014-05-21
Source

3 answers

Zamiast używać width (co jest sugestią podczas używania flexbox), możesz użyć {[2] } co oznacza:

  • 0 = don 't grow (skrót od flex-grow)
  • 0 = don 't shrink (skrót od flex-shrink)
  • 230px = start at 230px (skrót dla flex-basis)

Co oznacza: zawsze bądź 230px.

Zobacz skrzypek , Dzięki @TylerH

I nie potrzebujesz tu justify-content i 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;
}
 661
Author: Rudie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-17 14:39:51

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

Początkowe ustawienie kontenera flex to flex-shrink: 1. Dlatego Twoje kolumny się kurczą.

Nie ma znaczenia jaką szerokość podasz (może być width: 10000px), za pomocą flex-shrink określona szerokość może być ignorowana, a elementy flex nie mogą przepełnić kontenera.

[[9]}próbuję skonfigurować flexbox z 3 kolumny, gdzie lewa i prawa kolumna mają stałą szerokość...

Będziesz musiał wyłączyć kurczenie się. Oto kilka opcji: 

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

Lub 

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

Lub, zgodnie z zaleceniami spec: 

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

7.2. Elementy składowe Elastyczność

Autorzy są zachęcani do kontrolowania elastyczności za pomocą skrótu flex zamiast z jego własnościami długowiecznymi bezpośrednio, jako Stenografia poprawnie resetuje dowolne nieokreślone komponenty do accommodate common używa .

Więcej szczegółów tutaj: jakie są różnice między elastyczną podstawą a szerokością?

Dodatkową rzeczą, którą muszę zrobić, to ukryć prawą kolumnę w oparciu o interakcję z użytkownikiem, w którym to przypadku lewa kolumna nadal zachowa swoją stałą szerokość, ale środkowa kolumna wypełni resztę przestrzeni.

Spróbuj tego: 

.center { flex: 1; }

Pozwoli to kolumnie Środkowej na wykorzystanie dostępnej przestrzeni, w tym przestrzeni jego rodzeństwa po ich usunięciu.

Poprawione Skrzypce

 54
Author: Michael Benjamin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:50

Kompatybilność ze starszymi przeglądarkami może być przeciągnięta, więc należy doradzić.

Jeśli to nie problem, to śmiało. Sprawdź fragment. Przejdź do pełnego widoku strony i zmień rozmiar. Centrum zmieni swój rozmiar bez żadnych zmian w lewym lub prawym div.

Zmień wartości lewej i prawej, aby spełnić swoje wymagania.

Dziękuję. 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>
 8
Author: 2xSamurai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-31 07:54:03