Pytania otagowane jako flexbox

Moduł CSS do elastycznych układów, zapewniający szeroką gamę opcji wyrównywania elementów, eliminując potrzebę stosowania elementów zmiennoprzecinkowych i tabel.

5
Jak sprawić, by elementy Flexbox miały ten sam rozmiar?
Chcę użyć flexbox, który ma pewną liczbę elementów o tej samej szerokości. Zauważyłem, że flexbox rozdziela przestrzeń równomiernie, a nie samą przestrzeń. Na przykład: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> Uruchom fragment koduUkryj …
186 css  flexbox 
12
Tekst w kontenerze elastycznym nie jest zawijany w IE11
Rozważ następujący fragment: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text …
6
Kiedy elementy flexbox zawijają się w trybie kolumnowym, kontener nie zwiększa swojej szerokości
Pracuję nad zagnieżdżonym układem flexbox, który powinien działać w następujący sposób: Najbardziej zewnętrzny poziom ( ul#main) to lista pozioma, która musi zostać rozszerzona w prawo, gdy zostanie do niej dodanych więcej elementów. Jeśli będzie zbyt duży, powinien pojawić się poziomy pasek przewijania. #main { display: flex; flex-direction: row; flex-wrap: nowrap; …
167 html  css  flexbox 
10
Wyśrodkuj jeden i prawy / lewy wyrównaj inny element flexbox
Chciałbym mieć A Bi Cwyrównać w środku. Jak mogę Dprzejść całkowicie w prawo? PRZED: PO: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to …
167 html  css  flexbox 
7
Utrzymuj środkowy element wyśrodkowany, gdy elementy boczne mają różne szerokości
Wyobraź sobie następujący układ, w którym kropki reprezentują przestrzeń między polami: [Left box]......[Center box]......[Right box] Po usunięciu prawego pudełka chcę, aby środkowe pudełko nadal znajdowało się na środku, na przykład: [Left box]......[Center box]................. To samo dotyczy sytuacji, gdybym usunął lewe pudełko. ................[Center box]................. Teraz, gdy zawartość w środkowym polu wydłuży …
162 html  css  flexbox  centering 
5
Dlaczego flexbox rozciąga mój obraz zamiast zachowywać proporcje?
Flexbox zachowuje się tak, że rozciąga obrazy do ich naturalnej wysokości. Innymi słowy, jeśli mam kontener typu flexbox z obrazem podrzędnym i zmieniam szerokość tego obrazu, wysokość w ogóle się nie zmienia, a obraz zostaje rozciągnięty. div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" …
156 html  css  flexbox 
2
Spraw, by elementy flex miały szerokość zawartości, a nie szerokość kontenera nadrzędnego
Mam pojemnik <div>z display: flex. Ma dziecko <a>. Jak ustawić dziecko jako „w tekście”? W szczególności, w jaki sposób mogę ustawić szerokość dziecka na podstawie jego zawartości, a nie rozszerzać do szerokości rodzica? Co próbowałem: Ustawiłem dziecko display: inline-flex, ale nadal zajmowało całą szerokość. Wypróbowałem także wszystkie inne właściwości wyświetlania, …
154 html  css  flexbox 
2
Jak ustawić kolumnę o stałej szerokości za pomocą CSS flexbox
CodePen: http://codepen.io/anon/pen/RPNpaP . Chcę, aby czerwone pudełko miało tylko 25 em szerokości, gdy jest w widoku obok siebie - próbuję to osiągnąć, ustawiając CSS w tym zapytaniu o media: @media all and (min-width: 811px) {...} do: .flexbox .red { width: 25em; } Ale kiedy to robię, dzieje się tak: http://i.imgur.com/niFBrwt.png …
149 html  css  flexbox 
2
Układ murarski oparty tylko na CSS
Muszę zaimplementować dość spływy układ murarski. Jednak z wielu powodów nie chcę do tego używać JavaScript. Parametry: Wszystkie elementy mają tę samą szerokość Elementy mają wysokość, której nie można obliczyć po stronie serwera (obraz plus różne ilości tekstu) Jeśli zajdzie taka potrzeba, mogę żyć ze stałą liczbą kolumn jest rozwiązanie …
143 html  css  flexbox  css-grid 
1
Jak rozciągnąć dzieci, aby wypełnić oś poprzeczną?
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> Uruchom fragment koduUkryj wynikiRozwiń fragment Problem w tym, że właściwe dziecko nie reaguje. Mówiąc konkretnie, chcę, aby wypełnił wysokość opakowania. Jak to osiągnąć?
141 css  flexbox 
3
Co oznacza flex: 1?
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? Nie rozumiem, co to znaczy i …
130 css  flexbox 
11
Reaguj na natywny tekst wychodzący z mojego ekranu, odmawiając zawijania. Co robić?
Poniższy kod można znaleźć w tym przykładzie na żywo Mam następujący element reagowania: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a …
4
Jak wyrównać kolumny Flexbox z lewej i prawej strony?
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 { width: 20%; border: solid 1px #000; …
122 html  css  flexbox 
15
Jak wypełnić element DIV obrazem, zachowując jego proporcje?
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 pionowy. I nie ma …
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.