ஃப்ளெக்ஸ்பாக்ஸ் ஜெனரேட்டர்

ஃப்ளெக்ஸ் திசையில் பரிசோதனை செய்து, மடக்கு, நியாயப்படுத்த மற்றும் சீரமைக்கவும். உருப்படி தளவமைப்புகளை நேரலையில் புதுப்பிக்கவும், பின்னர் கொள்கலன் CSS ஐ நகலெடுக்கவும்.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ஃப்ளெக்ஸ் திசையில் பரிசோதனை செய்து, மடக்கு, நியாயப்படுத்த மற்றும் சீரமைக்கவும் - லேஅவுட் புதுப்பிப்பை நேரலையில் பார்க்கவும்.
உங்கள் உலாவியில் இயங்கும்
பயன்படுத்த இலவசம்

எப்படி பயன்படுத்துவது

நெகிழ்-திசை மற்றும் மடக்கு அமைக்கவும்.
நியாயப்படுத்த-உள்ளடக்கத்தை சரிசெய்து, உருப்படிகளை சீரமைக்கவும்.
Flexbox CSS ஐ நகலெடுக்கவும்.

How this tool works

நெகிழ்-திசை மற்றும் மடக்கு அமைக்கவும்.
நியாயப்படுத்த-உள்ளடக்கத்தை சரிசெய்து, உருப்படிகளை சீரமைக்கவும்.
Flexbox CSS ஐ நகலெடுக்கவும்.

Recommended settings

முதலில் இயல்புநிலை விருப்பங்களைப் பயன்படுத்தவும், பின்னர் தேவைப்பட்டால் சரிசெய்யவும்

Supported formats

Text / on-page input

File size and limits

மிகவும் சிக்கலான பல அடுக்கு மாதிரிக்காட்சிகள் பழைய தொலைபேசிகளில் மெதுவாக உணரலாம்.

Privacy

கலர் & CSS ஜெனரேட்டர்கள் உங்கள் உலாவியில் முழுமையாக இயங்கும். முன்னோட்டங்களும் மாற்றங்களும் உங்கள் பாணிகளை ஒருபோதும் பதிவேற்றாது.

Common use cases

உங்களுக்குத் தேவைப்படும் போதெல்லாம் ஃப்ளெக்ஸ்பாக்ஸ் ஜெனரேட்டரைப் பயன்படுத்தவும்: ஃப்ளெக்ஸ் திசையுடன் பரிசோதனை செய்யவும், மடக்கு, நியாயப்படுத்தவும் மற்றும் சீரமைக்கவும் - தளவமைப்புகளின் புதுப்பிப்பை நேரலையில் பார்க்கவும்.

Troubleshooting

ஒட்டப்பட்ட பிறகு முன்னோட்டம் வித்தியாசமாகத் தெரிகிறது

உங்கள் பக்கத்தில் போட்டியிடும் CSS ஐச் சரிபார்க்கவும் (மீட்டமைப்புகள், மரபுரிமை நிறங்கள்). உருவாக்கப்பட்ட விதியை முதலில் தனிமைப்படுத்தப்பட்ட நடைதாளில் நகலெடுக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

இது எனது CSS ஐ பதிவேற்றுகிறதா?

இல்லை. ஜெனரேட்டர்கள் மற்றும் மாற்றிகள் உங்கள் உலாவியில் நேரடி முன்னோட்டத்துடன் இயங்கும்.

எனக்கு கணக்கு தேவையா?

இல்லை. கருவியைத் திறந்து, கட்டுப்பாடுகளை மாற்றி, CSSஐ நகலெடுக்கவும்.