ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಜನರೇಟರ್ (Flexbox Generator)
ದೃಶ್ಯ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಮತ್ತು ಅದರ ಐಟಂಗಳನ್ನು ಹೊಂದಿಸಿ, ಲೇಔಟ್ ಲೈವ್ ಆಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುವುದನ್ನು ವೀಕ್ಷಿಸಿ ಮತ್ತು ಒಂದೇ ಕ್ಲಿಕ್ನಲ್ಲಿ CSS ಅನ್ನು ನಕಲಿಸಿ.
ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ನಿರ್ಮಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
justify-content ಮತ್ತು align-items ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
justify-content ಐಟಂಗಳನ್ನು ಮುಖ್ಯ ಅಕ್ಷದ (main axis) ಉದ್ದಕ್ಕೂ ಜೋಡಿಸುತ್ತದೆ — ಅಂದರೆ ರೋ ಅಥವಾ ಕಾಲಂ ಹರಿಯುವ ದಿಕ್ಕಿನಲ್ಲಿ — ಆದರೆ align-items ಅವುಗಳನ್ನು ಮತ್ತೊಂದು ಅಕ್ಷದ (cross axis) ಉದ್ದಕ್ಕೂ ಇರಿಸುತ್ತದೆ. ದಿಕ್ಕನ್ನು ರೋ ಇಂದ ಕಾಲಂಗೆ ಬದಲಾಯಿಸಿದರೆ ಎರಡು ಅಕ್ಷಗಳು ಪರಸ್ಪರ ಬದಲಾಗುತ್ತವೆ, ಆದ್ದರಿಂದ justify-content ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಮತ್ತು align-items ಎಡದಿಂದ ಬಲಕ್ಕೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
ಪ್ರತಿ-ಐಟಂ ನಿಯಂತ್ರಣಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ?
ಯಾವುದೇ ಐಟಂ ಅನ್ನು ಅದರ ಸಂಖ್ಯೆಯ ಮೂಲಕ ಆರಿಸಿ, ನಂತರ ಅದು ಖಾಲಿ ಜಾಗವನ್ನು ತುಂಬಲು ಎಷ್ಟು ಬೆಳೆಯಬೇಕು (grow), ಜಾಗ ಕಡಿಮೆ ಇದ್ದಾಗ ಎಷ್ಟು ಕುಗ್ಗಬೇಕು (shrink), ಅದರ ಆರಂಭಿಕ ಗಾತ್ರ (basis) ಮತ್ತು ಅದರದೇ ಆದ ಕ್ರಾಸ್-ಆಕ್ಸಿಸ್ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸಿ. ಆರ್ಡರ್ (Order) ಎಚ್ಟಿಎಮ್ಎಲ್ ಮುಟ್ಟದೆಯೇ ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಐಟಂ ಅನ್ನು ಮುಂಚಿತವಾಗಿ ಅಥವಾ ನಂತರದಲ್ಲಿ ಸರಿಸುತ್ತದೆ. ನೀವು ನಿಜವಾಗಿ ಬದಲಾಯಿಸುವ ಐಟಂಗಳು ಮಾತ್ರ CSS ನಲ್ಲಿ ತಮ್ಮದೇ ಆದ ನಿಯಮವನ್ನು ಪಡೆಯುತ್ತವೆ.
wrap ಮತ್ತು align-content ಯಾವಾಗ ಮುಖ್ಯವಾಗುತ್ತವೆ?
ವ್ರ್ಯಾಪಿಂಗ್ (wrapping) ಆಫ್ ಆಗಿದ್ದರೆ, ಪ್ರತಿಯೊಂದು ಐಟಂ ಅನ್ನು ಒಂದೇ ಲೈನ್ಗೆ ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಕಿರಿದಾಗಬಹುದು. ಇದನ್ನು ಆನ್ ಮಾಡಿದರೆ, ಹೊಂದಿಕೊಳ್ಳದ ಐಟಂಗಳು ಮುಂದಿನ ಲೈನ್ಗೆ ಇಳಿಯುತ್ತವೆ — ಆ ಸಮಯದಲ್ಲಿ align-content ನಿಯಂತ್ರಣವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಲೈನ್ಗಳನ್ನು ಒಂದು ಗುಂಪಾಗಿ ಜೋಡಿಸುತ್ತದೆ. ಗ್ಯಾಪ್ (Gap) ಮಾರ್ಜಿನ್ಗಳಿಲ್ಲದೆಯೇ ಐಟಂಗಳ ನಡುವೆ ಮತ್ತು ಲೈನ್ಗಳ ನಡುವೆ ಜಾಗವನ್ನು ಹೊಂದಿಸುತ್ತದೆ.