CSS Flexbox என்றால் என்ன?
CSS Flexbox (Flexible Box Layout) என்பது ஒரு வரிசையில் அல்லது நிரலில் இடத்தை விநியோகிக்கவும் உருப்படிகளை சீரமைக்கவும் ஒரு-பரிமாண தளவமைப்பு மாதிரி ஆகும். flex கொள்கலன் display: flex மூலம் வரையறுக்கப்படுகிறது, அதன் நேரடி குழந்தைகள் flex உருப்படிகளாகின்றன. முக்கிய கொள்கலன் பண்புகள்: flex-direction (வரிசை அல்லது நிரல்), flex-wrap (ஒற்றை vs. பல-வரி), justify-content (முதன்மை-அச்சு சீரமைப்பு), align-items (ஒவ்வொரு வரிக்கும் குறுக்கு-அச்சு சீரமைப்பு), மற்றும் align-content (பல வரிகளின் குறுக்கு-அச்சு சீரமைப்பு). முக்கிய உருப்படி பண்புகள்: flex-grow (ஒரு உருப்படி எவ்வளவு வளர்கிறது), flex-shrink (எவ்வளவு சுருங்குகிறது), flex-basis (ஆரம்ப அளவு), மற்றும் align-self (குறிப்பிட்ட உருப்படிக்கு கொள்கலனின் align-items ஐ மேலெழுதுகிறது). Flexbox வழிசெலுத்தல் பட்டைகள், அட்டை வரிசைகள், மையப்படுத்தப்பட்ட தளவமைப்புகள் மற்றும் எந்த ஒரு-பரிமாண ஏற்பாட்டிற்கும் ஏற்றது.
CSS Flexbox உருவாக்கியை எவ்வாறு பயன்படுத்துவது
-
கீழ்தோன்றல் மெனுக்கள் மற்றும் உள்ளீட்டைப் பயன்படுத்தி கொள்கலன் பண்புகளை (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) சரிசெய்யவும்.
-
தேர்ந்தெடுக்க முன்னோட்டத்தில் உள்ள எந்த உருப்படியையும் கிளிக் செய்யவும் (ஆரஞ்சு நிறமாக மாறும்).
-
உருப்படி பலகத்தில் தேர்ந்தெடுக்கப்பட்ட உருப்படியின் flex-grow, flex-shrink, flex-basis மற்றும் align-self ஐ அமைக்கவும்.
-
மேலும் உருப்படிகளை சேர்க்க '+ உருப்படி சேர்க்கவும்' கிளிக் செய்யவும்; தேர்ந்தெடுக்கப்பட்ட உருப்படியை நீக்க 'நீக்கவும்' கிளிக் செய்யவும்.
-
உருவாக்கப்பட்ட குறியீட்டைப் பார்க்க CSS மற்றும் HTML தாவல்களுக்கு இடையே மாறவும், பின்னர் நகலெடுக்கவும் கிளிக் செய்யவும்.
-
இயல்புநிலை 3-உருப்படி தளவமைப்புடன் மீண்டும் தொடங்க 'அனைத்தையும் மீட்டமைக்கவும்' கிளிக் செய்யவும்.