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.

30
Lepszy sposób na ustawienie odległości między elementami Flexbox
Aby ustawić minimalną odległość między elementami schematu flexbox używam margin: 0 5pxna .itemi margin: 0 -5pxna pojemniku. Dla mnie to wygląda na hack, ale nie mogę znaleźć lepszego sposobu na zrobienie tego. Przykład #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: …
777 css  flexbox 
12
Jak wyrównać element Flex w prawo?
Czy istnieje bardziej elastyczny sposób na wyrównanie do prawej strony „Kontakt” niż użycie position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div …
680 html  css  flexbox 
5
Dlaczego w CSS Flexbox nie ma właściwości „justify-items” i „justify-self”?
Rozważ główną oś i oś poprzeczną elastycznego pojemnika: Źródło: W3C Aby wyrównać elementy elastyczne wzdłuż głównej osi, istnieje jedna właściwość: justify-content Aby wyrównać elementy elastyczne wzdłuż osi poprzecznej, istnieją trzy właściwości: align-content align-items align-self Na powyższym zdjęciu główna oś jest pozioma, a oś poprzeczna pionowa. Są to domyślne kierunki elastycznego …
12
Flexbox: centrum poziomo i pionowo
Jak wyśrodkować div poziomo i pionowo w kontenerze za pomocą Flexbox. W poniższym przykładzie chcę, aby każda liczba była pod sobą (w rzędach), które są wyśrodkowane w poziomie. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { …
670 html  css  flexbox 
10
Jak sprawić, by Flexbox dzieci miały 100% wzrostu swoich rodziców?
Próbuję wypełnić pionową przestrzeń elementu Flex w Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> …
458 css  flexbox 
22
Jak utrzymać dwa divy obok siebie na tej samej wysokości?
Mam dwa divy obok siebie. Chciałbym, aby ich wysokość była taka sama i pozostała taka sama, jeśli jeden z nich zmieni rozmiar. Nie mogę tego rozgryźć. Pomysły? Aby wyjaśnić moje mylące pytanie, chciałbym, aby oba pola były zawsze tego samego rozmiaru, więc jeśli jeden rośnie, ponieważ tekst jest w nim …
441 html  css  html-table  flexbox 
8
Jak wyrównać tekst pionowo w flexbox?
Chciałbym użyć Flexboksa do pionowego wyrównania niektórych treści wewnątrz, <li>ale nie odnosząc wielkiego sukcesu. Sprawdziłem online i wiele samouczków faktycznie używa div otoki, który pobiera align-items:centerz ustawień Flex na rodzicu, ale zastanawiam się, czy można wyciąć ten dodatkowy element? W tym przypadku zdecydowałem się użyć Flexboksa, ponieważ wysokość elementu listy …
424 html  css  flexbox 
18
Jak wyrównać 3 div (lewy / środkowy / prawy) wewnątrz innego diva?
Chcę mieć 3 div wyrównane wewnątrz div kontenera, coś takiego: [[LEFT] [CENTER] [RIGHT]] Div kontenera ma szerokość 100% (bez ustawionej szerokości), a div div powinien pozostać w środku po zmianie rozmiaru kontenera. Więc ustawiłem: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Ale staje się: [[LEFT] [CENTER] ] [RIGHT] Jakieś wskazówki?
27
Flex-box: Wyrównaj ostatni rząd do siatki
Mam prosty układ flex-box z pojemnikiem takim jak: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Teraz chcę, aby elementy w ostatnim rzędzie były wyrównane z innymi. justify-content: space-between;należy stosować, ponieważ szerokość i wysokość siatki można regulować. Obecnie tak wygląda Tutaj chcę, aby element w prawym dolnym rogu …
378 css  flexbox  grid-layout 
8
Wyrównaj element do dołu za pomocą Flexbox
Mam divz kilkoma dziećmi: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> i chcę następujący układ: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- Niezależnie …
374 html  css  flexbox 
2
Flexbox nie daje równej szerokości elementom
Próba nawigacji flexbox, która ma do 5 elementów i tylko 3, ale nie dzieli jednakowej szerokości między wszystkie elementy. Skrzypce Samouczek, po którym modeluję to: http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 0 6.5rem; display: …
368 html  css  flexbox 
21
Bootstrap 4 wyrównaj elementy paska nawigacyjnego do prawej
Jak wyrównać element paska nawigacyjnego do prawej? Chcę mieć login i zarejestrować się po prawej stronie. Ale wszystko, co próbuję, nie działa. Do tej pory próbowałem: <div>wokół <ul>z atrybutem:style="float: right" <div>wokół <ul>z atrybutem:style="text-align: right" wypróbowałem te dwie rzeczy na <li>tagach próbowałem tych wszystkich rzeczy jeszcze raz z !importantdodanym na końcu …
7
Jaka jest różnica między wyświetlaniem: inline-flex a wyświetlaniem: flex?
Próbuję wyrównać w pionie elementy w opakowaniu identyfikatora. Dałem właściwość display:inline-flex;do tego identyfikatora, ponieważ opakowanie identyfikatora to elastyczny pojemnik. Ale nie ma różnicy w prezentacji. Spodziewałem się, że wszystko w identyfikatorze opakowania zostanie wyświetlone inline. Dlaczego nie jest #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div …
331 css  flexbox 
15
Vertical Align Center w Bootstrap 4
Próbuję wyśrodkować mój kontener na środku strony za pomocą Bootstrap 4. Do tej pory mi się nie powiodło. Każda pomoc będzie mile widziana. Zbudowałem go na Codepen.io , abyście mogli się nim bawić i dać mi znać, jak działa mój pomysł ... Pokaż fragment kodu var currentAuthor = ""; var …
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.