Justify-Content versus Align-items in Flexbox

Ik heb de verklaring geschreven display: flex vaker dan ik kan tellen, en nog steeds vergeet ik af en toe of het zo is justify-content of align-items dat regelt de verticale as op een rij Dat is geen onwetendheid; het is de eerlijke realiteit van een lay-outmodel waarvan het gedrag afhankelijk is van flex-direction. Wanneer de richting is row, justify-content werkt horizontaal Schakel naar column en dezelfde eigenschap werkt nu verticaal Iedereen die beweert dat ze nooit de browser dev tools om deze waarden te nudge totdat de dozen landen waar ze willen is of liegen of heeft een veel beter geheugen dan de mijne.

de Flexbox Generator is de tool die ik wou dat ik had toen ik dit model leerde, en degene waar ik nog steeds naar reikte als ik een prototype van een lay-out wil maken zonder een stylesheet aan te raken Je stelt de eigenschappen van de container in, een rij voorbeeldvakken wordt in realtime opnieuw weergegeven en de exacte CSS die produceert wat je ziet, bevindt zich in een kopieerklaar vak eronder. Het verandert & quot; onthoud welke eigenschap doet wat" in & quot; klik totdat het er goed uitziet en lees vervolgens het antwoord."

tl;dr: Flexbox is een eendimensionaal lay-outmodel De container drijft hem door zes eigenschappen: flex-direction, flex-wrap, justify-content, align-items, align-content, en gap. Deze generator stelt ze allemaal bloot, toont een live preview en zendt schone CSS uit. Omdat de preview dezelfde declaraties weergeeft die hij uitvoert, is wat je ziet precies wat je plakt. Het draait volledig in uw browser zonder aanmelding.

Welk probleem lost een flexbox generator op?

Flexbox is krachtig juist omdat het relatief is U beschrijft intent (" spreid deze items met gelijke ruimte ertussen, " " centreer dit op beide assen") en de browser berekent de pixels Maar relatieve systemen zijn moeilijk in uw hoofd te houden, omdat het effect van elke eigenschap afhangt van de toestand van de andere. align-content doet niets totdat items zijn omwikkeld De hoofdas en de kruisas wisselen wanneer u van richting verandert. space-between en space-around lijk op elkaar totdat je ze naast elkaar vergelijkt.

De snelste manier om intuïtie op te bouwen voor een relatief systeem is door het te manipuleren en te kijken Een generator laat de edit-save-refresh loop samenvallen tot een enkele interactie: verander een dropdown, zie de vakken bewegen Na tien minuten met een live preview is de eigenschap die de dwarsas bestuurt niet langer een feit dat je onthoudt en wordt iets dat je voelt En als je klaar bent met verkennen, zit je niet met een mentale noot om te transcriberen; de werkende CSS is al voor je geschreven.

Welke eigenschappen controleert de container?

Flexbox verdeelt de verantwoordelijkheid tussen de container en zijn items De container bepaalt de algehele opstelling, en dat is waar de generator zich richt, omdat hier de meeste lay-outbeslissingen wonen. Hier is wat elke containereigenschap doet.

Property	Wat het controleert	Gemeenschappelijke waarden
flex-direction	De hoofdas en de richting ervan	row, column, row-reverse, column-reverse
flex-wrap	Of items overstromen naar nieuwe lijnen	nowrap, wrap, wrap-reverse
justify-content	Tussenruimte langs de hoofdas	flex-start, center, space-between, space-evenly
align-items	Positionering op de dwarsas	stretch, center, flex-start, baseline
align-content	Afstand van omwikkelde lijnen op de dwarsas	stretch, center, space-between
gap	Ruimte tussen items	elke lengte, bijvoorbeeld 16px

Het mentale model dat deze stok maakt is het twee-assige idee uit de specificatie Items stromen langs de hoofdas, die flex-direction sets De dwarsas staat er altijd loodrecht op. justify-content verdeelt de ruimte op de hoofdas; align-items posities op de dwarsas Eenmaal flex-direction is column, de hoofdas is verticaal, dus justify-content stapelt nu items van boven naar beneden en align-items positioneert ze van links naar rechts Niets aan de eigenschappen veranderd; de assen draaiden eronder.

Hoe centreer ik een div met flexbox?

Dit is de meest gezochte flexbox vraag, en het antwoord is drie regels Stel de container op display: flex, dan justify-content: center en align-items: center. Dat concentreert het kind in één keer op de hoofdas en de dwarsas, wat voor een standaardrij horizontaal en verticaal het dode punt betekent.

In de generator, kies je center voor zowel uitlijningsbesturingen als de voorbeeldvakken springen naar het midden van het voorbeeldgebied, het uitvoervak toont dan

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

De reden dat dit recept de moeite waard is om op te bouwen door te klikken in plaats van te onthouden, is dat op het moment dat uw vereiste zelfs maar enigszins verandert. U wilt bijvoorbeeld dat het item bovenaan wordt vastgemaakt maar horizontaal wordt gecentreerd, u één vervolgkeuzelijst wijzigt en het resultaat ziet, in plaats van te raden welke van de twee eigenschappen die u moet bewerken.

Wanneer is align-content van belang?

align-content is de eigenschap mensen ingesteld en dan afvragen waarom er niets gebeurt Het antwoord zit in de specificatie: het heeft alleen invloed op de lay-out wanneer er meerdere lijnen flex items zijn Met flex-wrap: nowrap, elk item zit op een enkele lijn, dus er is geen set lijnen om te verdelen, en de eigenschap is inert.

De generator codeert deze regel zodat je er niet door misleid kan worden Wanneer wrap eraf is, is de align-content controle is uitgeschakeld en de eigenschap wordt weggelaten uit de gegenereerde CSS volledig Draai wrapping op en het wordt actief, en u kunt zien hoe het de rijen van gewikkelde items samen te duwen of spreiden ze uit elkaar op de dwarsas Het weglaten van de eigenschap alleen wanneer het iets doet houdt de uitvoer eerlijk: elke verklaring in de gekopieerde regel is er een die een zichtbaar effect op uw lay-out heeft.

Wat is het verschil tussen de waarden van de gerechtvaardigde inhoud?

de justify-content trefwoorden zijn waar een live preview zijn waarde verdient, omdat de verschillen ruimtelijk zijn en moeilijk te beschrijven in proza. flex-start pakt artikelen aan het begin van de hoofdas. center verpakt ze in het midden. space-between duwt het eerste en laatste item naar de randen en verdeelt de resterende ruimte gelijkmatig over de andere, zodat er geen ruimte is aan de buitenranden. space-around geeft elk item aan beide kanten een gelijke hoeveelheid ruimte, wat betekent dat de opening tussen twee items het dubbele is van de opening aan de randen. space-evenly maakt elke opening gelijk, inclusief de randen.

Het lezen van die alinea leert je bijna niets, door de vijf waarden met vijf vakjes op het scherm te klikken, leer je binnen enkele seconden, en je zult nooit verwarren space-between van space-around opnieuw heb je het randgedrag naast elkaar gezien. Dat is het argument voor het bouwen van de lay-out door manipulatie in plaats van door memorisatie, en het is hetzelfde argument achter het dichtbij houden van een reeks visuele CSS-tools: de gradiëntgenerator en de doosschaduwgenerator bestaan om dezelfde reden, omdat gradiënten en schaduwen ook gemakkelijker met het oog in te bellen zijn dan blind te schrijven Het bredere argument voor het samenstellen van dat soort toolkit is in dit stuk over de Webontwikkelaar Toolkit.

Flexbox of CSS-raster?

Deze vraag komt voortdurend ter sprake, en de framing dat het een wedstrijd is, is de fout Flexbox is eendimensionaal: het legt items langs een enkele as, wikkelt wanneer dat wordt verteld, en het blinkt uit in rijen dingen waarvan je de grootte wilt dat de browser onderhandelt Werkbalken, navigatiebalken, knopgroepen en kaartrijen zijn natuurlijke flexbox-taken CSS Grid is tweedimensionaal: het bestuurt rijen en kolommen samen, en het blinkt uit in de structuur op paginaniveau waar je expliciete tracks wilt.

In echte projecten nestelen ze constant Een raster definieert de paginagebieden, en een flexcontainer rangschikt de items binnen een van die regio's Flexbox grondig leren maakt grid niet overbodig en vice versa; het maakt je vloeiend in het gereedschap dat bij elke klus past Een generator is een snelle manier om die vloeiendheid te bereiken voor het eendimensionale geval, en zodra de containereigenschappen een tweede natuur zijn, hoeft het lezen en schrijven van flex lay-outs met de hand geen referentie meer nodig te hebben.

Hoe gebruik ik de Flexbox Generator?

De flow weerspiegelt hoe je over een lay-out denkt.

1. Kies flex-direction en of items moeten worden verpakt. Dit bepaalt de assen en het overloopgedrag, de twee beslissingen waar al het andere van afhangt.
2. Uitlijning instellen. Aanpassen justify-content op de hoofdas en align-items op de dwarsas totdat het voorbeeld overeenkomt met de opstelling in uw hoofd.
3. Afstelafstand Stel de gap tussen items met de schuifregelaar en wanneer de verpakking is ingeschakeld, instellen align-content om de lijnen te spacen.
4. Kopieer de CSS. De gegenereerde regel richt zich op a .container klasse en updates live Kopieer het in één klik en plak het in je stylesheet.

U kunt ook voorbeelditems toevoegen of verwijderen om te testen hoe een lay-out zich gedraagt onder verschillende inhoud. A space-between navbar ziet er prima uit met drie items en heel anders met zeven die wrap, en het kunnen veranderen van de telling tijdens het kijken is hoe je dat vangt voordat het in productie gaat.

Vervangt gap marges voor spatiëring?

Meestal wel, en het is een echte verbetering Voor gap werd ondersteund in flexcontainers, het uit elkaar plaatsen van items betekende het toevoegen van marges aan elk kind en het vervolgens bestrijden van de extra marge op het eerste of laatste kind, meestal met een :last-child overschrijven of een negatieve marge op de ouder. gap stelt de ruimte tussen items direct in, geldt ook tussen omwikkelde lijnen en voegt niets toe aan de buitenranden, zodat de hele klasse randmarge-bugs verdwijnt.

De generator behandelt gap als een eersteklas besturing met een pixelschuifregelaar, en het laat de verklaring weg wanneer de opening nul is, zodat de uitvoer minimaal blijft Voor productiewerk, gap op flex containers wordt goed ondersteund in de huidige browsers, dus er is zelden een reden om terug te grijpen voor de marge benadering Als u een spatiëring waarde tussen eenheden converteert terwijl u werkt, de CSS unit converter handvatten de px tegen rem rekenen zonder rekenmachine.

Wat zijn de limieten van de gegenereerde CSS?

De generator produceert de containerregel. Het stelt geen eigenschappen per item in zoals flex-grow, flex-shrink, of flex-basis, die bepalen hoe individuele items uit te breiden en contracteren om ruimte te vullen Dat zijn beslissingen op itemniveau die afhankelijk zijn van uw specifieke inhoud, en voor de meeste lay-outs de container eigenschappen plus flex: 1 op de items die moeten groeien is alles wat je nodig hebt Wanneer je wel een fijne per-item controle nodig hebt, is de gegenereerde container regel nog steeds de juiste basis om op voort te bouwen.

De uitvoer maakt gebruik van standaard, niet-voorgepredikte eigenschappen Leveranciersvoorvoegsels voor flexbox waren nodig voor browsers die jaren niet ondersteund zijn, dus een moderne stylesheet mag ze niet dragen, en het toevoegen ervan vandaag is ruis De gegenereerde CSS is productierijp zoals geschreven, wat het punt is: je vertrekt met een regel die je kunt plakken, niet een startschets die je moet afmaken Voor de bredere set kleine hulpprogramma's die front-end sneller laten werken, is dit overzicht van Productiviteitstools voor ontwikkelaar is een goede metgezel, net als de geleiding van de gradiëntgenerator als visuele CSS het onderdeel is dat u wilt versnellen.

Welke gemeenschappelijke lay-outs kan ik ermee bouwen?

Een handvol recepten omvat het meeste dagelijkse flexboxwerk, en elk is een paar klikken in de generator Een navigatiebalk met links een logo en links rechts is justify-content: space-between van align-items: center op een rij. Een perfect gecentreerde held, de klassieke " centreer een vakje op de pagina, " is justify-content: center en align-items: center. Een verticale stapel formuliervelden is flex-direction: column met een gap voor consistente spatiëring, die schoner is dan marges op elk veld Een responsieve rij kaarten die op smalle schermen op nieuwe lijnen wordt gewikkeld, is een rij met flex-wrap: wrap en een gap, dan flex: 1 op de kaarten zelf, zodat ze groeien om de rij te vullen.

De waarde van het bouwen van deze in de generator in plaats van ze uit het geheugen te kopiëren, is dat je de randgevallen onmiddellijk ziet. A space-between navbar met slechts één item pint dat item aan het begin, dat er als een bug uit kan zien totdat je dat begrijpt space-between heeft niets te verdelen met een enkel item Een rij wikkelkaarten gedraagt zich anders bij twee kaarten versus zes, en de preview' s instelbare itemtelling laat je beide controleren voordat je verzendt, Door de lay-out te bouwen door manipulatie komt het verrassende hoesje boven water terwijl je nog in de tool zit, niet nadat een gebruiker ze heeft gerapporteerd.

Als een recept eenmaal in je vingers zit, heb je de generator er niet meer voor nodig en schrijf je de vijf regels direct Dat is de gezonde eindtoestand De tool is net zo goed een leraar als een producent: elke lay-out die je bouwt door te klikken is er een die je de volgende keer dat je het met de hand schrijft iets beter begrijpt, en dat is precies hoe een goed visueel nut zichzelf geleidelijk overbodig zou moeten maken voor de basis, terwijl het handig blijft voor de lastige gevallen.

FAQ

Wat is een CSS flexbox generator?

Een CSS flexbox generator is een visueel hulpmiddel waarmee u flex container eigenschappen kunt instellen en de resulterende CSS kunt kopiëren U past justify-content, align-items, direction, wrap en gap aan, ziet een live preview, en plakt de gegenereerde regel in uw stylesheet.

Hoe centreer ik een div met flexbox?

Stel de container in op weergave: flex, vervolgens rechtvaardigen-inhoud: centreer en lijn-items: centreer Dat centreert de items op zowel de hoofd - als de dwarsas Kies in deze tool het midden voor zowel uitlijningsbesturingen als kopieer de CSS.

Wat is het verschil tussen justified-content en align-items?

justify-content verdeelt items langs de hoofdas, die horizontaal is voor een rij en verticaal voor een kolom. align-items positioneert items op de dwarsas, loodrecht op de hoofdas. Het veranderen van flex-direction swaps welke as elk bestuurt.

Wanneer heeft align-content effect?

align-content heeft alleen invloed op de lay-out wanneer items op meer dan één regel worden verpakt, omdat deze lijnen op de dwarsas uit elkaar worden geplaatst. Met flex-wrap ingesteld op nowrap is er één enkele regel, dus de eigenschap doet niets en dit hulpmiddel laat het weg uit de uitvoer.

Wat doet de gap-eigenschap in flexbox?

gap stelt een consistente ruimte in tussen flex-items zonder marges toe te voegen aan elk item Het is van toepassing tussen items op dezelfde lijn en tussen omwikkelde lijnen, en het vermijdt de randmargeproblemen die op marges gebaseerde afstand creëert.

Wat is het verschil tussen flex en inline-flex?

display: flex maakt van de container een doos op blokniveau die de volledige beschikbare breedte in beslag neemt. display: inline-flex maakt het een doos op inline-niveau die in de tekststroom zit en slechts zo breed is als de inhoud, terwijl beide hun kinderen dezelfde flexregels geven.

Vervangt flexbox CSS Grid?

No. Flexbox is een eendimensionaal model voor het leggen van items langs een enkele as, ideaal voor werkbalken, navigatie, en rijen kaarten CSS Grid is tweedimensionaal voor rijen en kolommen samen Ze zijn complementair en worden vaak gebruikt in dezelfde lay-out.

Is de gegenereerde CSS veilig om te gebruiken in de productie?

Ja. Flexbox wordt ondersteund in elke moderne browser en de tool zendt standaard, niet-voorgewerkte CSS-eigenschappen uit Alle verwerking gebeurt in uw browser, dus niets wordt geüpload en de tool werkt offline zodra deze is geladen.