⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

Kaip centruoti „Div“ CSS („Flexbox“)

Sukurkite CSS lanksčiojo dėžutės išdėstymą vizualiai: sureguliuokite kryptį, išlyginkite turinį, sulygiuokite elementus, lanksčią apvyniojimą ir tarpą konteineryje, taip pat kiekvienam vaikui lanksčiojo augimo, lankstaus susitraukimo ir lankstumo pagrindu – visa tai su tiesiogine peržiūra ir kopijuojamu CSS.

Apdorojama... 0%

Rezultatas

Čia yra tiesioginis atsakymas į dažniausiai užduodamą klausimą CSS: norėdami centre „div“, įdėkite ekraną: flex, justify-content: centre ir align-items: centre pirminėje vietoje. Viskas – trys deklaracijos ant konteinerio, ir vaikas sėdi idealiai centre tiek horizontaliai, tiek vertikaliai, bet kokio dydžio. Šiame puslapyje atidaromas generatorius su jau pritaikytu deriniu, todėl toliau pateiktoje peržiūroje jis rodomas trijuose sunumeruotuose laukeliuose.

Prieš naudojant „flexbox“, centruojant „div“, reikėjo nulaužimų: paraštė: 0 automatinis, centruojamas tik horizontaliai ir veikia tik fiksuoto pločio bloke; vertikalus centravimas reiškia padėtį: absoliutus su neigiamomis paraštėmis arba transformacijos triukas, abu trapūs, kai keičiasi turinio dydis. Justify-content tvarko pagrindinę ašį, o align-items – kryžminę ašį – kartu jie susitelkia abiem kryptimis, nepaisant vaiko ūgio ar pločio, todėl ši pora tapo standartiniu atsakymu.

Vilkite bet kurį toliau esantį valdiklį ir stebėkite, kaip trys peržiūros laukeliai lieka centre, kai konteineris keičia formą, arba pridėkite tarpą tarp jų. Kai atrodo teisinga, nukopijuokite apačioje esantį CSS bloką tiesiai į savo stiliaus lapą – jis veikia taip pat visose šiuolaikinėse naršyklėse, nereikia bibliotekos.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Sudėtinio rodinio valdikliai: lanksti kryptis, lygiuoti turinį, lygiuoti elementus, lankstus apvyniojimas ir tarpo įvestis pikseliais, tiesiogiai pritaikyti peržiūrai.
  • Pagal numatytuosius nustatymus trys spalvomis koduotos vaikų dėžutės (pridėkite iki aštuonių, pašalinkite iki dviejų), kiekviena su savo lanksčiojo augimo, lankstaus susitraukimo ir lankstaus pagrindo laukais.
  • Kopijuojamas CSS blokas su .flex-container taisykle ir viena .flex-item-N taisykle kiekvienam vaikui, kuris turi nenumatytąsias lankstumo savybes.

Pagrindiniai privalumai

✓ Kiekvienas konteinerio valdiklis ir kiekvienas vaiko lankstus augimas, lankstus susitraukimas ir lankstumo pagrindu atnaujinami trys sunumeruoti peržiūros laukeliai, todėl prieš paliesdami stiliaus lapą tiksliai matote, ką daro jūsų lanksčios dėžutės taisyklės.
✓ Generatorius spausdina tik antrines taisykles, kurios iš tikrųjų skiriasi nuo numatytųjų CSS nustatymų, todėl nukopijuotas kodas lieka trumpas ir įskaitomas, o ne iš naujo nustato flex-grow: 0 kiekviename langelyje.
✓ Iš anksto nustatyti puslapiai išsprendžia išdėstymus, kurių žmonės ieško pagal pavadinimą: centruojamas div, logotipas su kairiosiomis nuorodomis ir dešinioji naršymo juosta ir vienodo pločio lankstūs stulpeliai – atidarykite vieną ir įrankis jau sukonfigūruotas.

Naudojimo atvejai

  • • Gaukite tikslią CSS, kad centruotumėte „div“ tiek horizontaliai, tiek vertikaliai, stebėdami, kaip tiesioginės peržiūros laukeliuose veikia elementų išlyginimas ir lygiavimas.
  • • Sukurkite logotipo kairėje, nuorodų dešinėje naršymo juostos išdėstymą su tarpais tarp elementų ir lygiavimo: centre, tada nukopijuokite sudėtinio rodinio CSS tiesiai į antraštės komponentą.
  • • Palyginkite tarpą tarp, tarpų aplink ir tolygiai vienas šalia kito tuose pačiuose trijuose langeliuose, užuot spėlioję, kuris iš jų atitinka norimą tarpą.