ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಜನರೇಟರ್

ಫ್ಲೆಕ್ಸ್ ನಿರ್ದೇಶನದೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ಸುತ್ತು, ಸಮರ್ಥಿಸಿ ಮತ್ತು ಜೋಡಿಸಿ. ಐಟಂ ಲೇಔಟ್‌ಗಳ ನವೀಕರಣವನ್ನು ಲೈವ್ ಆಗಿ ವೀಕ್ಷಿಸಿ, ನಂತರ ಕಂಟೇನರ್ 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 ಅನ್ನು ಪರಿಶೀಲಿಸಿ (ಮರುಹೊಂದಿಕೆಗಳು, ಆನುವಂಶಿಕ ಬಣ್ಣಗಳು). ರಚಿಸಲಾದ ನಿಯಮವನ್ನು ಮೊದಲು ಪ್ರತ್ಯೇಕವಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ನಕಲಿಸಿ.

FAQ

ಇದು ನನ್ನ CSS ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆಯೇ?

ಇಲ್ಲ. ಜನರೇಟರ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತಕಗಳು ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತವೆ.

ನನಗೆ ಖಾತೆ ಬೇಕೇ?

ಇಲ್ಲ. ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ, ನಿಯಂತ್ರಣಗಳನ್ನು ಟ್ವೀಕ್ ಮಾಡಿ ಮತ್ತು CSS ಅನ್ನು ನಕಲಿಸಿ.