ಫ್ಲೆಕ್ಸ್ ಬಾಕ್ಸ್ ಎಂದರೇನು? ಎಲ್ಲಾ CSS ಗುಣಲಕ್ಷಣಗಳು, ಮೂಲ ತತ್ವಗಳು, ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲಗಳ ವಿವರಣೆ. ಫ್ಲೆಕ್ಸ್‌ನಲ್ಲಿನ ಉಪಯುಕ್ತ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕೆಲವು ಉಪಯುಕ್ತ ಉದಾಹರಣೆಗಳು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ವೆಬ್‌ಸೈಟ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸೂಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಮೂರು-ಕಾಲಮ್, "ಹೋಲಿ ಗ್ರೇಲ್" ಲೇಔಟ್ ಎಂದು ಕರೆಯಲ್ಪಡುತ್ತದೆ, ಅಲ್ಲಿ ಎಲ್ಲಾ ಕಾಲಮ್‌ಗಳು ಅವುಗಳ ವಿಷಯವನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ ಪೂರ್ಣ ಎತ್ತರವಾಗಿರಬೇಕು. ಅದೇ ಸಮಯದಲ್ಲಿ, ಮೂಲ ಕೋಡ್‌ನಲ್ಲಿ ಮುಖ್ಯ ವಿಷಯವು ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಮೊದಲು ಬರುತ್ತದೆ ಮತ್ತು ಪುಟದಲ್ಲಿಯೇ ಮುಖ್ಯ ವಿಷಯವು ನ್ಯಾವಿಗೇಷನ್ ನಂತರ ಬರುತ್ತದೆ.

ಹೀಗೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ಮೊದಲು, ಕೆಲವು ಹ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸದೆಯೇ ಈ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸುವುದು ತುಂಬಾ ಕಷ್ಟಕರವಾಗಿತ್ತು. ಡೆವಲಪರ್‌ಗಳು ಆಗಾಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್‌ಅಪ್ ಸೇರಿಸುವುದು, ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ಮತ್ತು ವಿಷಯದ ಪ್ರಮಾಣ ಅಥವಾ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಸಾಲಿನಲ್ಲಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇತರ ತಂತ್ರಗಳನ್ನು ಮಾಡಬೇಕಾಗಿತ್ತು. ಆದರೆ, ಮೇಲಿನ ಉದಾಹರಣೆಯು ತೋರಿಸಿದಂತೆ, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಎಲ್ಲವೂ ಹೆಚ್ಚು ಸರಳವಾಗಿದೆ.

ಕೋಡ್‌ನ ಸಾರಾಂಶ ಇಲ್ಲಿದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು #ಮುಖ್ಯ ಅಂಶವನ್ನು ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಆಗಿ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳನ್ನು ಬ್ಲಾಕ್ ಅಂಶಗಳಾಗಿ ಬಿಡುತ್ತೇವೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಮಧ್ಯ ಭಾಗ ಮಾತ್ರ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಆಗುತ್ತದೆ. ಅದನ್ನು ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಮಾಡುವ ತುಣುಕೊಂದು ಇಲ್ಲಿದೆ.

#ಮುಖ್ಯ (ಪ್ರದರ್ಶನ: ಫ್ಲೆಕ್ಸ್; ನಿಮಿಷ-ಎತ್ತರ: ಕ್ಯಾಲ್ಕ್ (100vh - 40vh); )

ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಮಾಡಲು ಡಿಸ್ಪ್ಲೇ: ಫ್ಲೆಕ್ಸ್ ಅನ್ನು ಬಳಸಿ. ನಾವು ಕ್ಯಾಲ್ಕ್() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮಿಷ-ಎತ್ತರವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತು #ಮುಖ್ಯವನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದ 100% ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ ಮೈನಸ್ಹೆಡರ್ ಮತ್ತು ಬೇಸ್ನ ಎತ್ತರ (ಪ್ರತಿ 20vh). ಕಡಿಮೆ ವಿಷಯವಿದ್ದರೂ ಸಹ, ಲೇಔಟ್ ಪರದೆಯ ಸಂಪೂರ್ಣ ಎತ್ತರವನ್ನು ತುಂಬುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ, ಪರದೆಯ ಎತ್ತರಕ್ಕಿಂತ ಕಡಿಮೆ ವಿಷಯವನ್ನು ತೆಗೆದುಕೊಂಡರೆ ಅಡಿಟಿಪ್ಪಣಿ ಎಂದಿಗೂ ಏರುವುದಿಲ್ಲ ಮತ್ತು ಅದರ ಕೆಳಗೆ ಖಾಲಿ ಜಾಗವನ್ನು ಬಿಡುವುದಿಲ್ಲ.

ನಿಮಿಷ-ಎತ್ತರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು ತುಂಬಾ ಸರಳವಾಗಿದೆ, ನಾವು ಬಾಕ್ಸ್-ಗಾತ್ರವನ್ನು ಅನ್ವಯಿಸಿದ್ದೇವೆ: ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ಬಾರ್ಡರ್-ಬಾಕ್ಸ್. ನಾವು ಇದನ್ನು ಮಾಡದಿದ್ದರೆ, ನಾವು ಸೇರಿಸಬೇಕಾಗಿದೆ ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯಕಳೆಯಬೇಕಾದ ಮೊತ್ತಕ್ಕೆ.

ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿದ ನಂತರ, ನಾವು ಫ್ಲೆಕ್ಸ್ ಅಂಶಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುತ್ತೇವೆ.

#ಮುಖ್ಯ > ಲೇಖನ ( ಫ್ಲೆಕ್ಸ್: 1; ) #ಮುಖ್ಯ > ನ್ಯಾವ್, #ಮುಖ್ಯ > ಪಕ್ಕಕ್ಕೆ (ಫ್ಲೆಕ್ಸ್: 0 0 20vw; ಹಿನ್ನೆಲೆ: ಬೀಜ್; ) #ಮುಖ್ಯ > ನ್ಯಾವ್ (ಆದೇಶ: -1; )

ಫ್ಲೆಕ್ಸ್ ಆಸ್ತಿಯು ಫ್ಲೆಕ್ಸ್-ಗ್ರೋ, ಫ್ಲೆಕ್ಸ್-ಶ್ರಿಂಕ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್-ಆಧಾರಿತ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಮೊದಲ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಕೇವಲ ಒಂದು ಮೌಲ್ಯವನ್ನು ಮಾತ್ರ ಬರೆದಿದ್ದೇವೆ, ಆದ್ದರಿಂದ ಫ್ಲೆಕ್ಸ್ ಫ್ಲೆಕ್ಸ್-ಗ್ರೋ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಎರಡನೆಯ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಎಲ್ಲಾ ಮೂರು ಮೌಲ್ಯಗಳನ್ನು ಬರೆದಿದ್ದೇವೆ