Mam flexbox lewy-prawy: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div>...
Jak wszyscy wiemy, flexnieruchomość jest skrótem dla flex-grow, flex-shrinkoraz flex-basiswłaściwości. Jego domyślną wartością jest 0 1 auto, co oznacza flex-grow: 0; flex-shrink: 1; flex-basis: auto; ale zauważyłem, że w wielu miejscach flex: 1jest używany. Czy to skrót od 1 1 autoczy 1 0 auto?...
Z typowym CSS mógłbym przesunąć jedną z dwóch kolumn w lewo, a drugą w prawo, z pewną przestrzenią pomiędzy nimi. Jak mam to zrobić z flexboxem? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a...
Znalazłem ten wątek - Jak rozciągnąć obraz, aby wypełnić <div>, zachowując jednocześnie jego proporcje? - nie do końca tego chcę. Mam element div o określonym rozmiarze i znajdujący się w nim obraz. Chcę zawsze wypełniać element div obrazem, niezależnie od tego, czy obraz jest poziomy czy...
Planuję odejść od "pływających" układów i używać CSS flexbox w przyszłych projektach. Byłem zachwycony, widząc, że wszystkie główne przeglądarki w ich aktualnych wersjach obsługują (w taki czy inny sposób) flexbox. Udałem się do „Rozwiązany przez Flexbox”, aby spojrzeć na kilka przykładów. Jednak...
Mam prostą stronę internetową z zawartością Lipsum, która jest wyśrodkowana na stronie. Strona działa dobrze w Chrome i Firefox. Jeśli zmniejszę rozmiar okna, zawartość wypełnia okno, aż nie może, a następnie dodaje pasek przewijania i wypełnia zawartość poza ekranem, w dół. Jednak strona nie jest...
Używając modelu CSS flex box, jak zmusić obraz do zachowania proporcji? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Zwróć uwagę, że obrazy rozciągają się lub kurczą, aby wypełnić szerokość pojemnika. W porządku, ale czy możemy też rozciągnąć lub zmniejszyć wysokość, aby zachować proporcje...
position: stickyUtknąłem na tym trochę i pomyślałem, że udostępnię to + flexbox mam: Mój sticky div działał dobrze, dopóki nie przełączyłem widoku na pojemnik flexbox i nagle element div nie był lepki, gdy był zapakowany w element nadrzędny flexbox. .flexbox-wrapper { display: flex;...
mam <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> Rodzic ma .parent { display: flex; } W przypadku mojego pierwszego dziecka chcę po prostu przesunąć przedmiot w prawo. I inne...
Rozumiem, że jest to niemożliwe do osiągnięcia za pomocą Flexbox, ponieważ każdy wiersz może mieć tylko minimalną wysokość wymaganą do dopasowania jego elementów, ale czy można to osiągnąć za pomocą nowszej siatki CSS? Żeby było jasne, chcę mieć równą wysokość dla wszystkich elementów w siatce...
Chcę używać aplikacji o pełnej wysokości przy użyciu Flexbox. Znalazłem to, czego chcę, używając starego modułu układu flexbox ( display: box;i innych rzeczy) w tym linku: CSS3 Aplikacja Flexbox o pełnej wysokości i przepełnienie Jest to poprawne rozwiązanie dla przeglądarek, które obsługują...
To pytanie dotyczy przeglądarki z pełną obsługą css3, w tym Flexbox. Mam pojemnik elastyczny z kilkoma przedmiotami. Wszystkie są uzasadnione do flex-start, ale chcę, aby ostatni .end element był uzasadniony do flex-end. Czy istnieje dobry sposób na zrobienie tego bez modyfikowania kodu HTML i...
Jak mogę sprawdzić, czy wiersz układu flexbox zajmuje pozostałą przestrzeń w pionie w oknie przeglądarki? Mam 3-rzędowy układ flexbox. Pierwsze dwa rzędy mają stałą wysokość, ale trzeci jest dynamiczny i chciałbym, aby urósł do pełnej wysokości przeglądarki. Mam inny flexbox w wierszu-3, który...
Próba: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Uruchom fragment koduHide resultsRozwiń fragment Mam dwa pytania, proszę: Dlaczego w zasadzie tak się dzieje span? Jakie jest...
Użyłem układu CSS flex box, który wygląda jak poniżej: Jeśli ekran się zmniejszy, zamieni się w to: Problem polega na tym, że obrazy nie są zmieniane, zachowując współczynnik proporcji z oryginalnego obrazu. Czy można użyć czystego CSS i układu flex box, aby umożliwić zmianę rozmiaru...
Potrzebuję pomocy w rozwiązaniu problemu, muszę wyśrodkować zawartość w kolumnie w programie bootstrap4, proszę znaleźć mój kod poniżej <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections">...
Chcę zrobić divkij na górze ekranu bez wpływu na inne elementy, a jego element potomny w środku. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Uruchom fragment koduUkryj...
Chcę, aby elementy flex były wyśrodkowane, ale gdy mamy drugą linię, aby mieć 5 (z obrazka poniżej) poniżej 1 i nie wyśrodkowane w rodzicu. Oto przykład tego, co mam: ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li {...
Jak widać, list-itemspierwsze rowmają takie same height. Ale przedmioty w drugiej rowmają różne heights. Chcę, żeby wszystkie przedmioty miały mundur height. Czy jest jakiś sposób na osiągnięcie tego bez podawania stałej wysokości i tylko przy użyciu Flexbox ? Tutaj jest mój code .list...
Próbuję wyśrodkować wewnętrzne elementy <button>-tagu za pomocą flexboxów justify-content: center. Ale Safari ich nie wyśrodkowuje. Mogę zastosować ten sam styl do innych tagów i działa zgodnie z przeznaczeniem (zobacz <p>-tag). Tylko przycisk jest wyrównany do lewej. Wypróbuj...