LibraTool logoLibraTool

ಉಚಿತ CSS ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಜನರೇಟರ್

ಲೈವ್ ಐಟಂಗಳ ಮೇಲೆ ಫ್ಲೆಕ್ಸ್ ಡೈರೆಕ್ಷನ್, ವ್ರ್ಯಾಪ್, ಜಸ್ಟಿಫೈ ಮತ್ತು ಅಲೈನ್ ಅನ್ನು ಪ್ರಯೋಗಿಸಿ — ಮತ್ತು CSS ಕಾಪಿ ಮಾಡಿ.

ಒಮ್ಮೆ ಲೋಡ್ ಆದ ನಂತರ ಆಫ್‌ಲೈನ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಪ್ರೀಸೆಟ್‌ಗಳು

ಸಲಹೆ: ಪ್ರಿವ್ಯೂನಲ್ಲಿ ಒಂದು ಐಟಂ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಅದರ ಮೇಲೆ flex-grow: 1 ಟಾಗಲ್ ಆಗುತ್ತದೆ.

ಲೈವ್ ಪ್ರಿವ್ಯೂ
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತದೆ — ಏನೂ ಅಪ್‌ಲೋಡ್ ಆಗುವುದಿಲ್ಲ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಇಂಟರಾಕ್ಟಿವ್ flexbox ಪ್ಲೇಗ್ರೌಂಡ್: flex-direction, wrap, justify-content ಮತ್ತು align-items ಬದಲಾಯಿಸಿ ಮತ್ತು 10 ಲೈವ್ ಐಟಂಗಳವರೆಗೆ ತಕ್ಷಣ ಮರುಜೋಡಣೆಯಾಗುವುದನ್ನು ನೋಡಿ. ಯಾವುದೇ ಐಟಂಗೆ flex-grow: 1 ನೀಡಲು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಅದು ಜಾಗವನ್ನು ಹೇಗೆ ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂದು ನೋಡಿ. CSS ಲೈವ್ ಆಗಿ ನವೀಕರಿಸುತ್ತದೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ನಕಲಿಸಲು ಸಿದ್ಧ.

  1. 1
    ಕಂಟೈನರ್ ಹೊಂದಿಸಿ
    ದಿಕ್ಕು, wrap, justify-content, align-items, ಅಂತರ.
  2. 2
    ಐಟಂಗಳನ್ನು ಸೇರಿಸಿ
    ಒಂದರಿಂದ ಹತ್ತು ಸಂಖ್ಯಿತ flex ಐಟಂಗಳು.
  3. 3
    ಪ್ರಯೋಗಿಸಿ
    flex-grow ಟಾಗಲ್ ಮಾಡಿ ಪರಿಣಾಮ ನೋಡಲು ಐಟಂ ಕ್ಲಿಕ್ ಮಾಡಿ.
  4. 4
    CSS ನಕಲಿಸಿ
    ಕಂಟೈನರ್ (ಮತ್ತು ಐಟಂ) ನಿಯಮಗಳು, ಅಂಟಿಸಲು ಸಿದ್ಧ.

ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ — ಏನೂ ಅಪ್‌ಲೋಡ್ ಆಗುವುದಿಲ್ಲ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು

🟦

CSS ಗ್ರಿಡ್ ಜನರೇಟರ್

CSS ಗ್ರಿಡ್ ಅನ್ನು ದೃಷ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ — ಟ್ರ್ಯಾಕ್‌ಗಳು, ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಗ್ಯಾಪ್‌ಗಳು — ಮತ್ತು ಜನರೇಟ್ ಆದ CSS ಹಾಗೂ HTML ಅನ್ನು ಕಾಪಿ ಮಾಡಿ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
🎨

CSS ಬಾಕ್ಸ್ ಶ್ಯಾಡೋ ಜನರೇಟರ್

ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ, ಬಹು-ಲೇಯರ್ ಸ್ಟ್ಯಾಕಿಂಗ್, ಬಣ್ಣ ಆಯ್ಕೆಗಾರ, ಇನ್‌ಸೆಟ್ ಟಾಗಲ್, ಮತ್ತು ಒಂದೇ ಕ್ಲಿಕ್ ನಕಲಿನೊಂದಿಗೆ CSS box-shadow ಗಾಗಿ ದೃಶ್ಯ ಬಿಲ್ಡರ್. Material, ನ್ಯೂಮಾರ್ಫಿಸಂ, ಮತ್ತು ಗ್ಲೋ ಪ್ರಿಸೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
◖

CSS ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಜನರೇಟರ್

ಪ್ರತಿ ಮೂಲೆಯ ಮೇಲೆ ಸ್ವತಂತ್ರ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸುತ್ತಿನ ಮೂಲೆಗಳನ್ನು ದೃಶ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಸಾವಯವ ಆಕಾರಗಳಿಗಾಗಿ ಇಲಿಪ್ಟಿಕಲ್ X/Y ಸಿಂಟ್ಯಾಕ್ಸ್ ಬೆಂಬಲಿಸುತ್ತದೆ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು