ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗಾತ್ರದ ಅಲ್ಗಾರಿದಮ್‌ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಲೇಔಟ್‌ಗಳ ಒಂದು ಆಳವಾದ ನೋಟ

ನೀವು ಎಂದಾದರೂ flex: 1 ಅನ್ನು ಐಟಂಗಳ ಗುಂಪಿನ ಮೇಲೆ ಬಳಸಿ, ಸಂಪೂರ್ಣವಾಗಿ ಸಮಾನ ಕಾಲಮ್‌ಗಳನ್ನು ನಿರೀಕ್ಷಿಸಿ, ಆದರೆ ಅವುಗಳು ಇನ್ನೂ ವಿಭಿನ್ನ ಗಾತ್ರದಲ್ಲಿರುವುದನ್ನು ಕಂಡಿದ್ದೀರಾ? ಅಥವಾ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಹಾಳುಮಾಡುವಂತಹ ಅಸಹ್ಯವಾದ ಓವರ್‌ಫ್ಲೋಗೆ ಕಾರಣವಾಗುವ, ಕುಗ್ಗಲು ಹಠಮಾರಿ ನಿರಾಕರಿಸುವ ಫ್ಲೆಕ್ಸ್ ಐಟಂನೊಂದಿಗೆ ನೀವು ಹೋರಾಡಿದ್ದೀರಾ? ಈ ಸಾಮಾನ್ಯ ಹತಾಶೆಗಳು ಡೆವಲಪರ್‌ಗಳನ್ನು ಊಹೆ ಮತ್ತು ಯಾದೃಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ ಬದಲಾವಣೆಗಳ ಚಕ್ರಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತವೆ. ಆದರೆ, ಪರಿಹಾರವು ಮಾಂತ್ರಿಕವಲ್ಲ; ಅದು ತರ್ಕ.

ಈ ಒಗಟುಗಳಿಗೆ ಉತ್ತರವು CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ನ ಆಳದಲ್ಲಿದೆ, ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಸಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಚಲಾಯಿಸುವ ಶಕ್ತಿಯುತ, ಕಂಟೆಂಟ್-ಅರಿತ ಎಂಜಿನ್ ಆಗಿದೆ, ಆದರೆ ಅದರ ಆಂತರಿಕ ತರ್ಕವು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಅಪಾರದರ್ಶಕ ಬ್ಲ್ಯಾಕ್ ಬಾಕ್ಸ್‌ನಂತೆ ಭಾಸವಾಗಬಹುದು. ಈ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಸಾಧಿಸಲು ಮತ್ತು ನಿಜವಾಗಿಯೂ ಊಹಿಸಬಹುದಾದ, ಸ್ಥಿತಿಸ್ಥಾಪಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಮುಖವಾಗಿದೆ.

ಈ ಮಾರ್ಗದರ್ಶಿಯು ಜಗತ್ತಿನಾದ್ಯಂತ "ಪ್ರಯತ್ನ ಮತ್ತು ದೋಷ" ದಿಂದ "ಉದ್ದೇಶಪೂರ್ವಕ ವಿನ್ಯಾಸ"ಕ್ಕೆ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಸಾಗಲು ಬಯಸುವ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿದೆ. ನಾವು ಈ ಶಕ್ತಿಯುತ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಹಂತ-ಹಂತವಾಗಿ ವಿವರಿಸುತ್ತೇವೆ, ಗೊಂದಲವನ್ನು ಸ್ಪಷ್ಟತೆಗೆ ಪರಿವರ್ತಿಸುತ್ತೇವೆ ಮತ್ತು ಯಾವುದೇ ಭಾಷೆಯಲ್ಲಿ, ಯಾವುದೇ ವಿಷಯಕ್ಕಾಗಿ ಕೆಲಸ ಮಾಡುವ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ-ಅರಿತ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತೇವೆ.

ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್‌ಗಳ ಆಚೆಗೆ: ಇಂಟ್ರಿನ್ಸಿಕ್ ಮತ್ತು ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಗಾತ್ರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಅಲ್ಗಾರಿದಮ್‌ಗೆ ಧುಮುಕುವ ಮೊದಲು, CSS ಲೇಔಟ್‌ನಲ್ಲಿನ ಒಂದು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ: ಇಂಟ್ರಿನ್ಸಿಕ್ ಮತ್ತು ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಗಾತ್ರದ ನಡುವಿನ ವ್ಯತ್ಯಾಸ.

• ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಸೈಸಿಂಗ್ (ಬಾಹ್ಯ ಗಾತ್ರ): ಇದು ನೀವು, ಡೆವಲಪರ್, ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ. width: 500px, height: 50%, ಅಥವಾ width: 30rem ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳು ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಸೈಸಿಂಗ್‌ನ ಉದಾಹರಣೆಗಳಾಗಿವೆ. ಗಾತ್ರವನ್ನು ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯಕ್ಕೆ ಬಾಹ್ಯವಾದ ಅಂಶಗಳಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.
• ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಸಿಂಗ್ (ಆಂತರಿಕ ಗಾತ್ರ): ಇದು ಬ್ರೌಸರ್ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಅದು ಒಳಗೊಂಡಿರುವ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದಾಗ. ಉದ್ದವಾದ ಪಠ್ಯ ಲೇಬಲ್‌ಗೆ ಸರಿಹೊಂದುವಂತೆ ಸಹಜವಾಗಿ ಅಗಲವಾಗುವ ಬಟನ್ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಸಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತಿದೆ. ಗಾತ್ರವನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಆಂತರಿಕ ಅಂಶಗಳಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಇಂಟ್ರಿನ್ಸಿಕ್, ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಗಾತ್ರದಲ್ಲಿ ಪರಿಣತವಾಗಿದೆ. ನೀವು ನಿಯಮಗಳನ್ನು (ಫ್ಲೆಕ್ಸ್ ಪ್ರಾಪರ್ಟಿಗಳು) ಒದಗಿಸಿದರೂ, ಬ್ರೌಸರ್ ಅಂತಿಮ ಗಾತ್ರದ ನಿರ್ಧಾರಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ವಿಷಯ ಮತ್ತು ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ಮಾಡುತ್ತದೆ. ದ್ರವ, ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಇದು ತುಂಬಾ ಶಕ್ತಿಯುತವಾಗಿದೆ.

ಹೊಂದಿಕೊಳ್ಳುವಿಕೆಯ ಮೂರು ಆಧಾರ ಸ್ತಂಭಗಳು: `flex-basis`, `flex-grow`, ಮತ್ತು `flex-shrink` ಗಳ ಪುನರಾವಲೋಕನ

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಲ್ಗಾರಿದಮ್‌ನ ನಿರ್ಧಾರಗಳು ಪ್ರಾಥಮಿಕವಾಗಿ ಮೂರು ಪ್ರಾಪರ್ಟಿಗಳಿಂದ ಮಾರ್ಗದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ, ಇವುಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ flex ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಬಳಸಿ ಒಟ್ಟಿಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ. ಮುಂದಿನ ಹಂತಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಇವುಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆ ಅತ್ಯಗತ್ಯ.

1. `flex-basis`: ಆರಂಭಿಕ ಗೆರೆ

flex-basis ಅನ್ನು ಯಾವುದೇ ಬೆಳವಣಿಗೆ ಅಥವಾ ಕುಗ್ಗುವಿಕೆ ಸಂಭವಿಸುವ ಮೊದಲು ಮುಖ್ಯ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಫ್ಲೆಕ್ಸ್ ಐಟಂನ ಆದರ್ಶ ಅಥವಾ "ಕಾಲ್ಪನಿಕ" ಆರಂಭಿಕ ಗಾತ್ರವೆಂದು ಯೋಚಿಸಿ. ಇದು ಎಲ್ಲಾ ಇತರ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮಾಡುವ ಮೂಲ ರೇಖೆಯಾಗಿದೆ.

• ಇದು ಉದ್ದವಾಗಿರಬಹುದು (ಉದಾ., 100px, 10rem) ಅಥವಾ ಶೇಕಡಾವಾರು (25%).
• ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ auto. auto ಗೆ ಹೊಂದಿಸಿದಾಗ, ಬ್ರೌಸರ್ ಮೊದಲು ಐಟಂನ ಮುಖ್ಯ ಗಾತ್ರದ ಪ್ರಾಪರ್ಟಿಯನ್ನು (ಸಮತಲ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ಗೆ width, ಲಂಬಕ್ಕೆ height) ನೋಡುತ್ತದೆ.
• ಇಲ್ಲಿ ನಿರ್ಣಾಯಕ ಸಂಪರ್ಕವಿದೆ: ಮುಖ್ಯ ಗಾತ್ರದ ಪ್ರಾಪರ್ಟಿಯು ಕೂಡ auto ಆಗಿದ್ದರೆ, flex-basis ಐಟಂನ ಆಂತರಿಕ, ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಗಾತ್ರಕ್ಕೆ ಪರಿಹಾರವಾಗುತ್ತದೆ. ಹೀಗೆ ವಿಷಯವು ಆರಂಭದಿಂದಲೇ ಗಾತ್ರದ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ತನ್ನ ಮತವನ್ನು ಪಡೆಯುತ್ತದೆ.
• content ಮೌಲ್ಯವು ಸಹ ಲಭ್ಯವಿದೆ, ಇದು ಆಂತರಿಕ ಗಾತ್ರವನ್ನು ಬಳಸಲು ಬ್ರೌಸರ್‌ಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಹೇಳುತ್ತದೆ.

2. `flex-grow`: ಧನಾತ್ಮಕ ಸ್ಥಳವನ್ನು ಪಡೆಯುವುದು

flex-grow ಪ್ರಾಪರ್ಟಿಯು ಒಂದು ಘಟಕವಿಲ್ಲದ ಸಂಖ್ಯೆಯಾಗಿದ್ದು, ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿನ ಧನಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳವನ್ನು ಒಂದು ಐಟಂ ತನ್ನ ಸಹೋದರರಿಗೆ ಹೋಲಿಸಿದರೆ ಎಷ್ಟು ಹೀರಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ತನ್ನ ಎಲ್ಲಾ ಐಟಂಗಳ `flex-basis` ಮೌಲ್ಯಗಳ ಮೊತ್ತಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದ್ದಾಗ ಧನಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳ ಅಸ್ತಿತ್ವದಲ್ಲಿರುತ್ತದೆ.

• ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ 0, ಅಂದರೆ ಐಟಂಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬೆಳೆಯುವುದಿಲ್ಲ.
• ಎಲ್ಲಾ ಐಟಂಗಳು flex-grow: 1 ಹೊಂದಿದ್ದರೆ, ಉಳಿದ ಸ್ಥಳವನ್ನು ಅವುಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ಹಂಚಲಾಗುತ್ತದೆ.
• ಒಂದು ಐಟಂ flex-grow: 2 ಮತ್ತು ಇತರವುಗಳು flex-grow: 1 ಹೊಂದಿದ್ದರೆ, ಮೊದಲ ಐಟಂ ಲಭ್ಯವಿರುವ ಮುಕ್ತ ಸ್ಥಳದ ಎರಡು ಪಟ್ಟು ಹೆಚ್ಚಿನ ಭಾಗವನ್ನು ಪಡೆಯುತ್ತದೆ.

3. `flex-shrink`: ಋಣಾತ್ಮಕ ಸ್ಥಳವನ್ನು ಬಿಟ್ಟುಕೊಡುವುದು

flex-shrink ಪ್ರಾಪರ್ಟಿಯು flex-grow ಗೆ ಪ್ರತಿರೂಪವಾಗಿದೆ. ಇದು ಒಂದು ಘಟಕವಿಲ್ಲದ ಸಂಖ್ಯೆಯಾಗಿದ್ದು, ಕಂಟೇನರ್ ತನ್ನ ಎಲ್ಲಾ ಐಟಂಗಳ `flex-basis` ಗೆ ಸರಿಹೊಂದುವಷ್ಟು ಚಿಕ್ಕದಾಗಿದ್ದಾಗ ಐಟಂ ಹೇಗೆ ಜಾಗವನ್ನು ಬಿಟ್ಟುಕೊಡುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಮೂರರಲ್ಲಿ ಅತ್ಯಂತ ತಪ್ಪಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳಲ್ಪಟ್ಟಿದೆ.

• ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ 1, ಅಂದರೆ ಅಗತ್ಯವಿದ್ದರೆ ಐಟಂಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಕುಗ್ಗಲು ಅನುಮತಿಸಲಾಗುತ್ತದೆ.
• ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪುಗ್ರಹಿಕೆ ಎಂದರೆ flex-shrink: 2 ಐಟಂ ಅನ್ನು "ಎರಡು ಪಟ್ಟು ವೇಗವಾಗಿ" ಕುಗ್ಗುವಂತೆ ಮಾಡುತ್ತದೆ ಎಂಬುದು. ಇದು ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮವಾಗಿದೆ: ಒಂದು ಐಟಂ ಕುಗ್ಗುವ ಪ್ರಮಾಣವು ಅದರ `flex-shrink` ಫ್ಯಾಕ್ಟರ್ ಅನ್ನು ಅದರ `flex-basis` ನಿಂದ ಗುಣಿಸಿದಾಗ ಬರುವ ಪ್ರಮಾಣಕ್ಕೆ ಅನುಗುಣವಾಗಿರುತ್ತದೆ. ನಾವು ಈ ನಿರ್ಣಾಯಕ ವಿವರವನ್ನು ನಂತರ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಅನ್ವೇಷಿಸುತ್ತೇವೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗಾತ್ರದ ಅಲ್ಗಾರಿದಮ್: ಹಂತ-ಹಂತದ ವಿಭಜನೆ

ಈಗ, ನಾವು ಪರದೆಯನ್ನು ಸರಿಸಿ ಬ್ರೌಸರ್‌ನ ಚಿಂತನೆಯ ಪ್ರಕ್ರಿಯೆಯ ಮೂಲಕ ಸಾಗೋಣ. ಅಧಿಕೃತ W3C ಸ್ಪೆಸಿಫಿಕೇಶನ್ ಹೆಚ್ಚು ತಾಂತ್ರಿಕ ಮತ್ತು ನಿಖರವಾಗಿದ್ದರೂ, ನಾವು ಒಂದೇ ಫ್ಲೆಕ್ಸ್ ಲೈನ್‌ಗಾಗಿ ಕೋರ್ ತರ್ಕವನ್ನು ಹೆಚ್ಚು ಜೀರ್ಣವಾಗುವ, ಅನುಕ್ರಮ ಮಾದರಿಗೆ ಸರಳೀಕರಿಸಬಹುದು.

ಹಂತ 1: ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರಗಳು ಮತ್ತು ಕಾಲ್ಪನಿಕ ಮುಖ್ಯ ಗಾತ್ರಗಳನ್ನು ನಿರ್ಧರಿಸಿ

ಮೊದಲಿಗೆ, ಬ್ರೌಸರ್‌ಗೆ ಪ್ರತಿ ಐಟಂಗೂ ಒಂದು ಆರಂಭಿಕ ಬಿಂದು ಬೇಕು. ಇದು ಕಂಟೇನರ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಐಟಂಗೂ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ಪ್ರಾಥಮಿಕವಾಗಿ flex-basis ಪ್ರಾಪರ್ಟಿಯ ಪರಿಹರಿಸಿದ ಮೌಲ್ಯದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಈ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರವು ಮುಂದಿನ ಹಂತಗಳಿಗಾಗಿ ಐಟಂನ "ಕಾಲ್ಪನಿಕ ಮುಖ್ಯ ಗಾತ್ರ" ಆಗುತ್ತದೆ. ಇದು ತನ್ನ ಸಹೋದರರೊಂದಿಗೆ ಯಾವುದೇ ಮಾತುಕತೆಗೆ ಮುನ್ನ ಐಟಂ *ಇರಬಯಸುವ* ಗಾತ್ರವಾಗಿದೆ.

ಹಂತ 2: ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನ ಮುಖ್ಯ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಿ

ಮುಂದೆ, ಬ್ರೌಸರ್ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನ ಮುಖ್ಯ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಅದರ ಗಾತ್ರವನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತದೆ. ಇದು ನಿಮ್ಮ CSS ನಿಂದ ನಿಗದಿತ ಅಗಲವಾಗಿರಬಹುದು, ಅದರ ಪೇರೆಂಟ್‌ನ ಶೇಕಡಾವಾರು ಆಗಿರಬಹುದು, ಅಥವಾ ಅದು ತನ್ನದೇ ಆದ ವಿಷಯದಿಂದ ಆಂತರಿಕವಾಗಿ ಗಾತ್ರವನ್ನು ಹೊಂದಿರಬಹುದು. ಈ ಅಂತಿಮ, ನಿರ್ದಿಷ್ಟ ಗಾತ್ರವು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳು ಕೆಲಸ ಮಾಡಲು ಹೊಂದಿರುವ ಸ್ಥಳದ "ಬಜೆಟ್" ಆಗಿದೆ.

ಹಂತ 3: ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಲೈನ್‌ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ

ನಂತರ ಬ್ರೌಸರ್ ಐಟಂಗಳನ್ನು ಹೇಗೆ ಗುಂಪು ಮಾಡಬೇಕೆಂದು ನಿರ್ಧರಿಸುತ್ತದೆ. flex-wrap: nowrap (ಡೀಫಾಲ್ಟ್) ಹೊಂದಿಸಿದ್ದರೆ, ಎಲ್ಲಾ ಐಟಂಗಳನ್ನು ಒಂದೇ ಸಾಲಿನ ಭಾಗವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. flex-wrap: wrap ಅಥವಾ wrap-reverse ಸಕ್ರಿಯವಾಗಿದ್ದರೆ, ಬ್ರೌಸರ್ ಐಟಂಗಳನ್ನು ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ಸಾಲುಗಳಲ್ಲಿ ವಿತರಿಸುತ್ತದೆ. ಅಲ್ಗಾರಿದಮ್‌ನ ಉಳಿದ ಭಾಗವನ್ನು ನಂತರ ಪ್ರತಿ ಸಾಲಿನ ಐಟಂಗಳಿಗೆ ಸ್ವತಂತ್ರವಾಗಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ಹಂತ 4: ಹೊಂದಿಕೊಳ್ಳುವ ಉದ್ದಗಳನ್ನು ಪರಿಹರಿಸಿ (ಕೋರ್ ತರ್ಕ)

ಇದು ಅಲ್ಗಾರಿದಮ್‌ನ ಹೃದಯ ಭಾಗವಾಗಿದೆ, ಅಲ್ಲಿ ನಿಜವಾದ ಗಾತ್ರ ಮತ್ತು ವಿತರಣೆ ನಡೆಯುತ್ತದೆ. ಇದು ಎರಡು-ಭಾಗದ ಪ್ರಕ್ರಿಯೆ.

ಭಾಗ 4a: ಮುಕ್ತ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ

ಬ್ರೌಸರ್ ಫ್ಲೆಕ್ಸ್ ಲೈನ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಒಟ್ಟು ಮುಕ್ತ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ಎಲ್ಲಾ ಐಟಂಗಳ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರಗಳ ಮೊತ್ತವನ್ನು (ಹಂತ 1 ರಿಂದ) ಕಂಟೇನರ್‌ನ ಮುಖ್ಯ ಗಾತ್ರದಿಂದ (ಹಂತ 2 ರಿಂದ) ಕಳೆಯುವ ಮೂಲಕ ಮಾಡುತ್ತದೆ.

ಮುಕ್ತ ಸ್ಥಳ = ಕಂಟೇನರ್‌ನ ಮುಖ್ಯ ಗಾತ್ರ - ಎಲ್ಲಾ ಐಟಂಗಳ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರಗಳ ಮೊತ್ತ

ಈ ಫಲಿತಾಂಶ ಹೀಗಿರಬಹುದು:

• ಧನಾತ್ಮಕ: ಕಂಟೇನರ್‌ನಲ್ಲಿ ಐಟಂಗಳಿಗೆ ಬೇಕಾಗಿರುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸ್ಥಳವಿದೆ. ಈ ಹೆಚ್ಚುವರಿ ಸ್ಥಳವನ್ನು flex-grow ಬಳಸಿ ವಿತರಿಸಲಾಗುತ್ತದೆ.
• ಋಣಾತ್ಮಕ: ಐಟಂಗಳು ಒಟ್ಟಾರೆಯಾಗಿ ಕಂಟೇನರ್‌ಗಿಂತ ದೊಡ್ಡದಾಗಿವೆ. ಈ ಸ್ಥಳದ ಕೊರತೆಯು (ಒಂದು ಓವರ್‌ಫ್ಲೋ) ಐಟಂಗಳು ತಮ್ಮ flex-shrink ಮೌಲ್ಯಗಳ ಪ್ರಕಾರ ಕುಗ್ಗಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
• ಶೂನ್ಯ: ಐಟಂಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಸರಿಹೊಂದುತ್ತವೆ. ಯಾವುದೇ ಬೆಳವಣಿಗೆ ಅಥವಾ ಕುಗ್ಗುವಿಕೆ ಅಗತ್ಯವಿಲ್ಲ.

ಭಾಗ 4b: ಮುಕ್ತ ಸ್ಥಳವನ್ನು ವಿತರಿಸಿ

ಈಗ, ಬ್ರೌಸರ್ ಲೆಕ್ಕ ಹಾಕಿದ ಮುಕ್ತ ಸ್ಥಳವನ್ನು ವಿತರಿಸುತ್ತದೆ. ಇದೊಂದು ಪುನರಾವರ್ತಿತ ಪ್ರಕ್ರಿಯೆ, ಆದರೆ ನಾವು ತರ್ಕವನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಹೀಗೆ ಹೇಳಬಹುದು:

• ಮುಕ್ತ ಸ್ಥಳ ಧನಾತ್ಮಕವಾಗಿದ್ದರೆ (ಬೆಳವಣಿಗೆ):
  1. ಬ್ರೌಸರ್ ಲೈನ್‌ನಲ್ಲಿರುವ ಐಟಂಗಳ ಎಲ್ಲಾ flex-grow ಫ್ಯಾಕ್ಟರ್‌ಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ.
  2. ನಂತರ ಅದು ಧನಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳವನ್ನು ಪ್ರತಿ ಐಟಂಗೆ ಅನುಪಾತದಲ್ಲಿ ವಿತರಿಸುತ್ತದೆ. ಒಂದು ಐಟಂ ಪಡೆಯುವ ಸ್ಥಳದ ಪ್ರಮಾಣ: (ಐಟಂನ flex-grow / ಎಲ್ಲಾ flex-grow ಫ್ಯಾಕ್ಟರ್‌ಗಳ ಮೊತ್ತ) * ಧನಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳ.
  3. ಒಂದು ಐಟಂನ ಅಂತಿಮ ಗಾತ್ರವು ಅದರ flex-basis ಮತ್ತು ವಿತರಿಸಿದ ಸ್ಥಳದ ಅದರ ಪಾಲು ಆಗಿರುತ್ತದೆ. ಈ ಬೆಳವಣಿಗೆಯು ಐಟಂನ max-width ಅಥವಾ max-height ಪ್ರಾಪರ್ಟಿಯಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಡುತ್ತದೆ.
• ಮುಕ್ತ ಸ್ಥಳ ಋಣಾತ್ಮಕವಾಗಿದ್ದರೆ (ಕುಗ್ಗುವಿಕೆ):
  1. ಇದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಭಾಗವಾಗಿದೆ. ಪ್ರತಿ ಐಟಂಗೂ, ಬ್ರೌಸರ್ ಅದರ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರವನ್ನು ಅದರ flex-shrink ಮೌಲ್ಯದಿಂದ ಗುಣಿಸುವ ಮೂಲಕ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ: ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್ = ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರ * flex-shrink.
  2. ನಂತರ ಅದು ಈ ಎಲ್ಲಾ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್‌ಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ.
  3. ಋಣಾತ್ಮಕ ಸ್ಥಳವನ್ನು (ಓವರ್‌ಫ್ಲೋ ಪ್ರಮಾಣ) ಈ ತೂಕದ ಫ್ಯಾಕ್ಟರ್ ಆಧಾರದ ಮೇಲೆ ಪ್ರತಿ ಐಟಂಗೆ ಅನುಪಾತದಲ್ಲಿ ವಿತರಿಸಲಾಗುತ್ತದೆ. ಒಂದು ಐಟಂ ಕುಗ್ಗುವ ಪ್ರಮಾಣ: (ಐಟಂನ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್ / ಎಲ್ಲಾ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್‌ಗಳ ಮೊತ್ತ) * ಋಣಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳ.
  4. ಒಂದು ಐಟಂನ ಅಂತಿಮ ಗಾತ್ರವು ಅದರ flex-basis ಮತ್ತು ವಿತರಿಸಿದ ಋಣಾತ್ಮಕ ಸ್ಥಳದ ಅದರ ಪಾಲಿನಿಂದ ಕಳೆದಾಗ ಬರುವ ಮೊತ್ತವಾಗಿರುತ್ತದೆ. ಈ ಕುಗ್ಗುವಿಕೆಯು ಐಟಂನ min-width ಅಥವಾ min-height ಪ್ರಾಪರ್ಟಿಯಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಡುತ್ತದೆ, ಇದು ನಿರ್ಣಾಯಕವಾಗಿ auto ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗುತ್ತದೆ.

ಹಂತ 5: ಮುಖ್ಯ-ಅಕ್ಷದ ಜೋಡಣೆ

ಎಲ್ಲಾ ಐಟಂಗಳ ಅಂತಿಮ ಗಾತ್ರಗಳನ್ನು ನಿರ್ಧರಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ಕಂಟೇನರ್‌ನೊಳಗೆ ಮುಖ್ಯ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಐಟಂಗಳನ್ನು ಜೋಡಿಸಲು justify-content ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಎಲ್ಲಾ ಗಾತ್ರದ ಲೆಕ್ಕಾಚಾರಗಳು ಪೂರ್ಣಗೊಂಡ *ನಂತರ* ಸಂಭವಿಸುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಸನ್ನಿವೇಶಗಳು: ಸಿದ್ಧಾಂತದಿಂದ ವಾಸ್ತವಕ್ಕೆ

ಸಿದ್ಧಾಂತವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಒಂದು ವಿಷಯ; ಅದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡುವುದು ಜ್ಞಾನವನ್ನು ದೃಢಪಡಿಸುತ್ತದೆ. ಅಲ್ಗಾರಿದಮ್‌ನ ನಮ್ಮ ತಿಳುವಳಿಕೆಯಿಂದ ಈಗ ಸುಲಭವಾಗಿ ವಿವರಿಸಬಹುದಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸೋಣ.

ಸನ್ನಿವೇಶ 1: ನಿಜವಾದ ಸಮಾನ ಕಾಲಮ್‌ಗಳು ಮತ್ತು `flex: 1` ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್

ಸಮಸ್ಯೆ: ನೀವು ಎಲ್ಲಾ ಐಟಂಗಳಿಗೆ flex-grow: 1 ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೀರಿ ಆದರೆ ಅವು ಸಮಾನ ಅಗಲವನ್ನು ಪಡೆಯುವುದಿಲ್ಲ.

ವಿವರಣೆ: ನೀವು flex: auto (ಇದು flex: 1 1 auto ಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ) ನಂತಹ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಅನ್ನು ಬಳಸಿದಾಗ ಅಥವಾ flex-basis ಅನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ auto ನಲ್ಲಿ ಬಿಟ್ಟು ಕೇವಲ flex-grow: 1 ಅನ್ನು ಹೊಂದಿಸಿದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಅಲ್ಗಾರಿದಮ್ ಪ್ರಕಾರ, flex-basis: auto ಐಟಂನ ವಿಷಯದ ಗಾತ್ರಕ್ಕೆ ಪರಿಹರಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ಹೆಚ್ಚು ವಿಷಯವಿರುವ ಐಟಂ ದೊಡ್ಡ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರದೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಉಳಿದ ಮುಕ್ತ ಸ್ಥಳವನ್ನು ಸಮಾನವಾಗಿ ವಿತರಿಸಿದರೂ, ಐಟಂಗಳ ಅಂತಿಮ ಗಾತ್ರಗಳು ವಿಭಿನ್ನವಾಗಿರುತ್ತವೆ ಏಕೆಂದರೆ ಅವುಗಳ ಆರಂಭಿಕ ಬಿಂದುಗಳು ವಿಭಿನ್ನವಾಗಿದ್ದವು.

ಪರಿಹಾರ: flex: 1 ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಬಳಸಿ. ಇದು flex: 1 1 0% ಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಪ್ರಮುಖವಾದುದು flex-basis: 0%. ಇದು ಪ್ರತಿಯೊಂದು ಐಟಂ ಅನ್ನು 0 ರ ಕಾಲ್ಪನಿಕ ಬೇಸ್ ಗಾತ್ರದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಒತ್ತಾಯಿಸುತ್ತದೆ. ಕಂಟೇನರ್‌ನ ಸಂಪೂರ್ಣ ಅಗಲವು "ಧನಾತ್ಮಕ ಮುಕ್ತ ಸ್ಥಳ" ಆಗುತ್ತದೆ. ಎಲ್ಲಾ ಐಟಂಗಳು flex-grow: 1 ಹೊಂದಿರುವುದರಿಂದ, ಈ ಸಂಪೂರ್ಣ ಸ್ಥಳವನ್ನು ಅವುಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ವಿತರಿಸಲಾಗುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಅವುಗಳ ವಿಷಯವನ್ನು ಲೆಕ್ಕಿಸದೆ ನಿಜವಾದ ಸಮಾನ-ಅಗಲದ ಕಾಲಮ್‌ಗಳು ಉಂಟಾಗುತ್ತವೆ.

ಸನ್ನಿವೇಶ 2: `flex-shrink` ಅನುಪಾತದ ಒಗಟು

ಸಮಸ್ಯೆ: ನಿಮ್ಮ ಬಳಿ ಎರಡು ಐಟಂಗಳಿವೆ, ಎರಡಕ್ಕೂ flex-shrink: 1 ಇದೆ, ಆದರೆ ಕಂಟೇನರ್ ಕುಗ್ಗಿದಾಗ, ಒಂದು ಐಟಂ ಇನ್ನೊಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಅಗಲವನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ.

ವಿವರಣೆ: ಇದು ಋಣಾತ್ಮಕ ಸ್ಥಳಕ್ಕಾಗಿ ಹಂತ 4b ಯ ಪರಿಪೂರ್ಣ ವಿವರಣೆಯಾಗಿದೆ. ಕುಗ್ಗುವಿಕೆಯು ಕೇವಲ flex-shrink ಫ್ಯಾಕ್ಟರ್ ಅನ್ನು ಆಧರಿಸಿಲ್ಲ; ಇದು ಐಟಂನ flex-basis ನಿಂದ ತೂಕವನ್ನು ಹೊಂದಿದೆ. ಒಂದು ದೊಡ್ಡ ಐಟಂ "ಬಿಟ್ಟುಕೊಡಲು" ಹೆಚ್ಚಿನದನ್ನು ಹೊಂದಿದೆ.

500px ಕಂಟೇನರ್‌ನಲ್ಲಿ ಎರಡು ಐಟಂಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಐಟಂ A: flex: 0 1 400px; (400px ಬೇಸ್ ಗಾತ್ರ)
• ಐಟಂ B: flex: 0 1 200px; (200px ಬೇಸ್ ಗಾತ್ರ)

ಒಟ್ಟು ಬೇಸ್ ಗಾತ್ರ 600px, ಇದು ಕಂಟೇನರ್‌ಗೆ 100px ರಷ್ಟು ಹೆಚ್ಚಾಗಿದೆ (100px ಋಣಾತ್ಮಕ ಸ್ಥಳ).

• ಐಟಂ A ಯ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್: 400px * 1 = 400
• ಐಟಂ B ಯ ತೂಕದ ಕುಗ್ಗುವಿಕೆ ಫ್ಯಾಕ್ಟರ್: 200px * 1 = 200
• ಒಟ್ಟು ತೂಕದ ಫ್ಯಾಕ್ಟರ್‌ಗಳು: 400 + 200 = 600

ಈಗ, 100px ಋಣಾತ್ಮಕ ಸ್ಥಳವನ್ನು ವಿತರಿಸಿ:

• ಐಟಂ A ಕುಗ್ಗುತ್ತದೆ: (400 / 600) * 100px = ~66.67px
• ಐಟಂ B ಕುಗ್ಗುತ್ತದೆ: (200 / 600) * 100px = ~33.33px

ಎರಡಕ್ಕೂ flex-shrink: 1 ಇದ್ದರೂ, ದೊಡ್ಡ ಐಟಂ ಎರಡು ಪಟ್ಟು ಹೆಚ್ಚು ಅಗಲವನ್ನು ಕಳೆದುಕೊಂಡಿತು ಏಕೆಂದರೆ ಅದರ ಬೇಸ್ ಗಾತ್ರ ಎರಡು ಪಟ್ಟು ದೊಡ್ಡದಾಗಿತ್ತು. ಅಲ್ಗಾರಿದಮ್ ನಿಖರವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿದಂತೆ ವರ್ತಿಸಿದೆ.

ಸನ್ನಿವೇಶ 3: ಕುಗ್ಗದ ಐಟಂ ಮತ್ತು `min-width: 0` ಪರಿಹಾರ

ಸಮಸ್ಯೆ: ನಿಮ್ಮ ಬಳಿ ಉದ್ದವಾದ ಪಠ್ಯದ ಸ್ಟ್ರಿಂಗ್ (URL ನಂತಹ) ಅಥವಾ ದೊಡ್ಡ ಚಿತ್ರವಿರುವ ಐಟಂ ಇದೆ, ಮತ್ತು ಅದು ಒಂದು ನಿರ್ದಿಷ್ಟ ಗಾತ್ರಕ್ಕಿಂತ ಕೆಳಗೆ ಕುಗ್ಗಲು ನಿರಾಕರಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅದು ಕಂಟೇನರ್‌ನಿಂದ ಹೊರಚೆಲ್ಲುತ್ತದೆ.

ವಿವರಣೆ: ಕುಗ್ಗುವಿಕೆ ಪ್ರಕ್ರಿಯೆಯು ಐಟಂನ ಕನಿಷ್ಠ ಗಾತ್ರದಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಟ್ಟಿದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳು min-width: auto ಅನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಪಠ್ಯ ಅಥವಾ ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲಿಮೆಂಟ್‌ಗೆ, ಈ auto ಮೌಲ್ಯವು ಅದರ ಆಂತರಿಕ ಕನಿಷ್ಠ ಗಾತ್ರಕ್ಕೆ ಪರಿಹರಿಸುತ್ತದೆ. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಅತಿ ಉದ್ದದ ಮುರಿಯಲಾಗದ ಪದ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್‌ನ ಅಗಲವಾಗಿರುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್ ಅಲ್ಗಾರಿದಮ್ ಐಟಂ ಅನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ, ಆದರೆ ಈ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಕನಿಷ್ಠ ಅಗಲವನ್ನು ತಲುಪಿದಾಗ ಅದು ನಿಲ್ಲುತ್ತದೆ, ಇನ್ನೂ ಸಾಕಷ್ಟು ಸ್ಥಳವಿಲ್ಲದಿದ್ದರೆ ಓವರ್‌ಫ್ಲೋಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಪರಿಹಾರ: ಒಂದು ಐಟಂ ಅನ್ನು ಅದರ ಆಂತರಿಕ ವಿಷಯದ ಗಾತ್ರಕ್ಕಿಂತ ಚಿಕ್ಕದಾಗಿ ಕುಗ್ಗಲು ಅನುಮತಿಸಲು, ನೀವು ಈ ಡೀಫಾಲ್ಟ್ ವರ್ತನೆಯನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕು. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಪರಿಹಾರವೆಂದರೆ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗೆ min-width: 0 ಅನ್ನು ಅನ್ವಯಿಸುವುದು. ಇದು ಬ್ರೌಸರ್‌ಗೆ, "ಅಗತ್ಯವಿದ್ದರೆ ಈ ಐಟಂ ಅನ್ನು ಶೂನ್ಯ ಅಗಲದವರೆಗೆ ಕುಗ್ಗಿಸಲು ನಿಮಗೆ ನನ್ನ ಅನುಮತಿ ಇದೆ," ಎಂದು ಹೇಳುತ್ತದೆ, ಹೀಗಾಗಿ ಓವರ್‌ಫ್ಲೋವನ್ನು ತಡೆಯುತ್ತದೆ.

ಆಂತರಿಕ ಗಾತ್ರದ ಹೃದಯ: `min-content` ಮತ್ತು `max-content`

ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಗ್ರಹಿಸಲು, ನಾವು ಎರಡು ಸಂಬಂಧಿತ ಕೀವರ್ಡ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗಿದೆ:

• max-content: ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಆಂತರಿಕ ಆದ್ಯತೆಯ ಅಗಲ. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದು ಪಠ್ಯವು ಅನಂತ ಸ್ಥಳವನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು ಎಂದಿಗೂ ಸುತ್ತಿಕೊಳ್ಳಬೇಕಾಗಿಲ್ಲದಿದ್ದರೆ ತೆಗೆದುಕೊಳ್ಳುವ ಅಗಲವಾಗಿರುತ್ತದೆ.
• min-content: ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಆಂತರಿಕ ಕನಿಷ್ಠ ಅಗಲ. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದು ಅದರ ಅತಿ ಉದ್ದದ ಮುರಿಯಲಾಗದ ಸ್ಟ್ರಿಂಗ್‌ನ (ಉದಾ., ಒಂದೇ ಉದ್ದದ ಪದ) ಅಗಲವಾಗಿರುತ್ತದೆ. ಇದು ತನ್ನದೇ ಆದ ವಿಷಯವು ಓವರ್‌ಫ್ಲೋ ಆಗದೆ ಪಡೆಯಬಹುದಾದ ಚಿಕ್ಕ ಗಾತ್ರವಾಗಿದೆ.

flex-basis auto ಆಗಿದ್ದಾಗ ಮತ್ತು ಐಟಂನ width ಕೂಡ auto ಆಗಿದ್ದಾಗ, ಬ್ರೌಸರ್ ಮೂಲಭೂತವಾಗಿ max-content ಗಾತ್ರವನ್ನು ಐಟಂನ ಆರಂಭಿಕ ಫ್ಲೆಕ್ಸ್ ಬೇಸ್ ಗಾತ್ರವಾಗಿ ಬಳಸುತ್ತದೆ. ಇದಕ್ಕಾಗಿಯೇ ಹೆಚ್ಚು ವಿಷಯವಿರುವ ಐಟಂಗಳು ಫ್ಲೆಕ್ಸ್ ಅಲ್ಗಾರಿದಮ್ ಮುಕ್ತ ಸ್ಥಳವನ್ನು ವಿತರಿಸಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲೇ ದೊಡ್ಡದಾಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ.

ಜಾಗತಿಕ ಪರಿಣಾಮಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ

ಈ ಕಂಟೆಂಟ್-ಚಾಲಿತ ವಿಧಾನವು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳನ್ನು ಹೊಂದಿದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮುಖ್ಯವಾಗುತ್ತದೆ

ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಗಾತ್ರವು ಅಂತರರಾಷ್ಟ್ರೀಯ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಎರಡು ಅಲಗಿನ ಕತ್ತಿಯಾಗಿದೆ. ಒಂದೆಡೆ, ಬಟನ್ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಶೀರ್ಷಿಕೆಗಳು ಉದ್ದದಲ್ಲಿ ತೀವ್ರವಾಗಿ ಬದಲಾಗಬಹುದಾದ ವಿವಿಧ ಭಾಷೆಗಳಿಗೆ ಲೇಔಟ್‌ಗಳು ಹೊಂದಿಕೊಳ್ಳಲು ಇದು ಅದ್ಭುತವಾಗಿದೆ. ಮತ್ತೊಂದೆಡೆ, ಇದು ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಬ್ರೇಕ್‌ಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು.

ಜರ್ಮನ್ ಭಾಷೆಯನ್ನು ಪರಿಗಣಿಸಿ, ಇದು ತನ್ನ ಉದ್ದವಾದ ಸಂಯುಕ್ತ ಪದಗಳಿಗೆ ಪ್ರಸಿದ್ಧವಾಗಿದೆ. "Donaudampfschifffahrtsgesellschaftskapitän" ನಂತಹ ಪದವು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ min-content ಗಾತ್ರವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ. ಆ ಎಲಿಮೆಂಟ್ ಒಂದು ಫ್ಲೆಕ್ಸ್ ಐಟಂ ಆಗಿದ್ದರೆ, ನೀವು ಚಿಕ್ಕ ಇಂಗ್ಲಿಷ್ ಪಠ್ಯದೊಂದಿಗೆ ಲೇಔಟ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿದಾಗ ನೀವು ನಿರೀಕ್ಷಿಸದ ರೀತಿಯಲ್ಲಿ ಅದು ಕುಗ್ಗುವುದನ್ನು ವಿರೋಧಿಸಬಹುದು. ಅಂತೆಯೇ, ಜಪಾನೀಸ್ ಅಥವಾ ಚೈನೀಸ್‌ನಂತಹ ಕೆಲವು ಭಾಷೆಗಳಲ್ಲಿ ಪದಗಳ ನಡುವೆ ಅಂತರವಿಲ್ಲದಿರಬಹುದು, ಇದು ಸುತ್ತುವಿಕೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ಹೇಗೆ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಆಂತರಿಕ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಎಲ್ಲರಿಗೂ, ಎಲ್ಲೆಡೆ ಕೆಲಸ ಮಾಡಲು ಸಾಕಷ್ಟು ದೃಢವಾದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಏಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ ಎಂಬುದಕ್ಕೆ ಇದು ಒಂದು ಪರಿಪೂರ್ಣ ಉದಾಹರಣೆಯಾಗಿದೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯ ಟಿಪ್ಪಣಿಗಳು

ಬ್ರೌಸರ್ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಆಂತರಿಕ ಗಾತ್ರಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಅವುಗಳ ವಿಷಯವನ್ನು ಅಳೆಯಬೇಕಾಗಿರುವುದರಿಂದ, ಅದಕ್ಕೆ ಗಣನಾತ್ಮಕ ವೆಚ್ಚವಿದೆ. ಹೆಚ್ಚಿನ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಈ ವೆಚ್ಚವು ನಗಣ್ಯ ಮತ್ತು ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಸಾವಿರಾರು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಅತ್ಯಂತ ಸಂಕೀರ್ಣ, ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ UI ಗಳಲ್ಲಿ, ಈ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಬಹುದು. ಅಂತಹ ಮುಂದುವರಿದ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಡೆವಲಪರ್‌ಗಳು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು contain: layout ಅಥವಾ content-visibility ನಂತಹ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು, ಆದರೆ ಇದು ಇನ್ನೊಂದು ದಿನದ ವಿಷಯ.

ಕ್ರಿಯಾಶೀಲ ಒಳನೋಟಗಳು: ನಿಮ್ಮ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗಾತ್ರದ ಚೀಟ್ ಶೀಟ್

ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಹೇಳುವುದಾದರೆ, ನೀವು ತಕ್ಷಣ ಅನ್ವಯಿಸಬಹುದಾದ ಪ್ರಮುಖ ಅಂಶಗಳು ಇಲ್ಲಿವೆ:

• ನಿಜವಾದ ಸಮಾನ-ಅಗಲದ ಕಾಲಮ್‌ಗಳಿಗಾಗಿ: ಯಾವಾಗಲೂ flex: 1 ಬಳಸಿ (ಇದು flex: 1 1 0% ನ ಸಂಕ್ಷಿಪ್ತ ರೂಪ). ಶೂನ್ಯದ flex-basis ಪ್ರಮುಖವಾಗಿದೆ.
• ಒಂದು ಐಟಂ ಕುಗ್ಗದಿದ್ದರೆ: ಅತ್ಯಂತ ಸಂಭವನೀಯ ಕಾರಣವೆಂದರೆ ಅದರ ಸೂಚ್ಯ min-width: auto. ಫ್ಲೆಕ್ಸ್ ಐಟಂಗೆ min-width: 0 ಅನ್ನು ಅನ್ವಯಿಸಿ, ಅದು ತನ್ನ ವಿಷಯದ ಗಾತ್ರಕ್ಕಿಂತ ಕೆಳಗೆ ಕುಗ್ಗಲು ಅನುಮತಿಸುತ್ತದೆ.
• ನೆನಪಿಡಿ `flex-shrink` ತೂಕವನ್ನು ಹೊಂದಿದೆ: ದೊಡ್ಡ flex-basis ಹೊಂದಿರುವ ಐಟಂಗಳು ಅದೇ flex-shrink ಫ್ಯಾಕ್ಟರ್ ಹೊಂದಿರುವ ಸಣ್ಣ ಐಟಂಗಳಿಗಿಂತ ನಿರಪೇಕ್ಷವಾಗಿ ಹೆಚ್ಚು ಕುಗ್ಗುತ್ತವೆ.
• `flex-basis` ರಾಜ: ಇದು ಎಲ್ಲಾ ಗಾತ್ರದ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ಆರಂಭಿಕ ಬಿಂದುವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಅಂತಿಮ ಲೇಔಟ್ ಮೇಲೆ ಹೆಚ್ಚಿನ ಪ್ರಭಾವ ಬೀರಲು flex-basis ಅನ್ನು ನಿಯಂತ್ರಿಸಿ. auto ಬಳಸುವುದು ವಿಷಯದ ಗಾತ್ರಕ್ಕೆ ಮನ್ನಣೆ ನೀಡುತ್ತದೆ; ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯವನ್ನು ಬಳಸುವುದು ನಿಮಗೆ ಸ್ಪಷ್ಟ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
• ಬ್ರೌಸರ್‌ನಂತೆ ಯೋಚಿಸಿ: ಹಂತಗಳನ್ನು ದೃಶ್ಯೀಕರಿಸಿ. ಮೊದಲು, ಬೇಸ್ ಗಾತ್ರಗಳನ್ನು ಪಡೆಯಿರಿ. ನಂತರ, ಮುಕ್ತ ಸ್ಥಳವನ್ನು (ಧನಾತ್ಮಕ ಅಥವಾ ಋಣಾತ್ಮಕ) ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ. ಅಂತಿಮವಾಗಿ, ಆ ಸ್ಥಳವನ್ನು ಗ್ರೋ/ಶ್ರಿಂಕ್ ನಿಯಮಗಳ ಪ್ರಕಾರ ವಿತರಿಸಿ.

ತೀರ್ಮಾನ

CSS ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗಾತ್ರದ ಅಲ್ಗಾರಿದಮ್ ಯಾದೃಚ್ಛಿಕ ಮಾಯಾಜಾಲವಲ್ಲ; ಇದೊಂದು ಸು-ವ್ಯಾಖ್ಯಾನಿತ, ತಾರ್ಕಿಕ, ಮತ್ತು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತವಾದ ಕಂಟೆಂಟ್-ಅರಿತ ವ್ಯವಸ್ಥೆ. ಸರಳ ಪ್ರಾಪರ್ಟಿ-ಮೌಲ್ಯ ಜೋಡಿಗಳನ್ನು ಮೀರಿ ಆಧಾರವಾಗಿರುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿಶ್ವಾಸ ಮತ್ತು ನಿಖರತೆಯೊಂದಿಗೆ ಲೇಔಟ್‌ಗಳನ್ನು ಊಹಿಸಲು, ಡೀಬಗ್ ಮಾಡಲು ಮತ್ತು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಸಾಮರ್ಥ್ಯವನ್ನು ಪಡೆಯುತ್ತೀರಿ.

ಮುಂದಿನ ಬಾರಿ ಫ್ಲೆಕ್ಸ್ ಐಟಂ ತಪ್ಪಾಗಿ ವರ್ತಿಸಿದಾಗ, ನೀವು ಊಹಿಸಬೇಕಾಗಿಲ್ಲ. ನೀವು ಮಾನಸಿಕವಾಗಿ ಅಲ್ಗಾರಿದಮ್ ಮೂಲಕ ಸಾಗಬಹುದು: flex-basis ಅನ್ನು ಪರಿಶೀಲಿಸಿ, ವಿಷಯದ ಆಂತರಿಕ ಗಾತ್ರವನ್ನು ಪರಿಗಣಿಸಿ, ಮುಕ್ತ ಸ್ಥಳವನ್ನು ವಿಶ್ಲೇಷಿಸಿ, ಮತ್ತು flex-grow ಅಥವಾ flex-shrink ನ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಿ. ನೀವು ಈಗ ಕೇವಲ ಸೊಗಸಾದ ಮಾತ್ರವಲ್ಲದೆ ಸ್ಥಿತಿಸ್ಥಾಪಕವಾದ UI ಗಳನ್ನು ರಚಿಸುವ ಜ್ಞಾನವನ್ನು ಹೊಂದಿದ್ದೀರಿ, ಅದು ವಿಷಯದ ಕ್ರಿಯಾತ್ಮಕ ಸ್ವಭಾವಕ್ಕೆ ಸುಂದರವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ಅದು ಜಗತ್ತಿನ ಎಲ್ಲಿಂದ ಬಂದರೂ ಸರಿ.