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-ಐಟಂ ಲೇಔಟ್ನೊಂದಿಗೆ ಮತ್ತೆ ಪ್ರಾರಂಭಿಸಲು 'ಎಲ್ಲವನ್ನೂ ರೀಸೆಟ್ ಮಾಡಿ' ಕ್ಲಿಕ್ ಮಾಡಿ.