LibraTool logoLibraTool

இலவச CSS ஃபிளக்ஸ்பாக்ஸ் ஜெனரேட்டர்

நேரடி உருப்படிகளில் flex direction, wrap, justify மற்றும் align-ஐ முயற்சி செய்யுங்கள் — 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 Border Radius உருவாக்கி

ஒவ்வொரு மூலையிலும் தனித்தனி கட்டுப்பாட்டுடன் வட்டமான மூலைகளை காட்சி வழியாக வடிவமைக்கவும். இயற்கையான ப்ளாப் வடிவங்களுக்கான நீள்வட்ட X/Y தொடரியலை ஆதரிக்கிறது.

முயற்சிக்கவும்

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