ಸಿಎಸ್‌ಎಸ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಮಾಸ್ಟರಿ: ಸುಧಾರಿತ ಅಲೈನ್ಮೆಂಟ್ ಮತ್ತು ವಿತರಣೆ

ಹಲವಾರು ವರ್ಷಗಳಿಂದ, ಸಿಎಸ್‌ಎಸ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಆಧುನಿಕ ವೆಬ್ ಲೇಔಟ್‌ನ ಅಡಿಗಲ್ಲಾಗಿದೆ. ಹೆಚ್ಚಿನ ಡೆವಲಪರ್‌ಗಳು ಐಟಂಗಳನ್ನು ಸಾಲಾಗಿ ಜೋಡಿಸಲು ಅಥವಾ ಸರಳವಾದ ಕೇಂದ್ರಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು display: flex ಅನ್ನು ಬಳಸುವುದರಲ್ಲಿ ಪರಿಚಿತರಾಗಿದ್ದಾರೆ. ಆದಾಗ್ಯೂ, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ನಿಜವಾದ ಪಾಂಡಿತ್ಯವು ಸುಧಾರಿತ ಅಲೈನ್ಮೆಂಟ್ ಮತ್ತು ಡೈನಾಮಿಕ್ ವಿತರಣೆಗಾಗಿ ಅದರ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮವಾದ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಲ್ಲಿದೆ. ನೀವು justify-content: center ಮತ್ತು align-items: center ನ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮೀರಿ ಹೋದಾಗ, ನೀವು ಸಂಕೀರ್ಣ, ರೆಸ್ಪಾನ್ಸಿವ್, ಮತ್ತು ಸ್ವಾಭಾವಿಕವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ಆಶ್ಚರ್ಯಕರ ಸುಲಭವಾಗಿ ರಚಿಸುವ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತೀರಿ.

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

ಅಡಿಪಾಯ: ಮುಖ್ಯ ಮತ್ತು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್‌ಗಳ ಕುರಿತು ಒಂದು ತ್ವರಿತ ಪುನರಾವಲೋಕನ

ಸುಧಾರಿತ ವಿಷಯಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ಪ್ರತಿಯೊಂದು ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವ ಎರಡು ಆಕ್ಸಿಸ್‌ಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದಿರುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿನ ಎಲ್ಲಾ ಅಲೈನ್ಮೆಂಟ್ ಮತ್ತು ವಿತರಣಾ ಪ್ರಾಪರ್ಟಿಗಳು ಈ ಎರಡು ಆಕ್ಸಿಸ್‌ಗಳಲ್ಲಿ ಒಂದರ ಉದ್ದಕ್ಕೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

• ಮುಖ್ಯ ಆಕ್ಸಿಸ್ (Main Axis): ಇದು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳನ್ನು ಜೋಡಿಸಲಾಗುವ ಪ್ರಾಥಮಿಕ ಆಕ್ಸಿಸ್ ಆಗಿದೆ. ಇದರ ದಿಕ್ಕನ್ನು flex-direction ಪ್ರಾಪರ್ಟಿ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.
• ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ (Cross Axis): ಈ ಆಕ್ಸಿಸ್ ಯಾವಾಗಲೂ ಮುಖ್ಯ ಆಕ್ಸಿಸ್‌ಗೆ ಲಂಬವಾಗಿರುತ್ತದೆ.

ಇಲ್ಲಿನ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ಈ ಆಕ್ಸಿಸ್‌ಗಳು ಸ್ಥಿರವಾಗಿಲ್ಲ. ಅವು ನಿಮ್ಮ flex-direction ಮೌಲ್ಯವನ್ನು ಆಧರಿಸಿ ತಮ್ಮನ್ನು ಮರು-ಹೊಂದಿಸಿಕೊಳ್ಳುತ್ತವೆ:

• flex-direction: row (ಡೀಫಾಲ್ಟ್): ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಸಮತಲವಾಗಿರುತ್ತದೆ (ಎಡದಿಂದ-ಬಲಕ್ಕೆ), ಮತ್ತು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಲಂಬವಾಗಿರುತ್ತದೆ (ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ).
• flex-direction: column: ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಲಂಬವಾಗುತ್ತದೆ (ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ), ಮತ್ತು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಸಮತಲವಾಗುತ್ತದೆ (ಎಡದಿಂದ-ಬಲಕ್ಕೆ).
• flex-direction: row-reverse: ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಸಮತಲವಾಗಿರುತ್ತದೆ ಆದರೆ ಬಲದಿಂದ-ಎಡಕ್ಕೆ ಚಲಿಸುತ್ತದೆ.
• flex-direction: column-reverse: ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಲಂಬವಾಗಿರುತ್ತದೆ ಆದರೆ ಕೆಳಗಿನಿಂದ-ಮೇಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ.

ಈ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯನ್ನು ಮರೆಯುವುದು ಹೆಚ್ಚಿನ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗೊಂದಲಗಳಿಗೆ ಮೂಲವಾಗಿದೆ. ಅಲೈನ್ಮೆಂಟ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಯಾವಾಗಲೂ ನಿಮ್ಮನ್ನು ಕೇಳಿಕೊಳ್ಳಿ: "ನನ್ನ ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಯಾವ ದಿಕ್ಕಿನಲ್ಲಿ ಸಾಗುತ್ತಿದೆ?"

justify-content ನೊಂದಿಗೆ ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ವಿತರಣೆಯಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

justify-content ಪ್ರಾಪರ್ಟಿಯು ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಉದ್ದಕ್ಕೂ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ನಡುವೆ ಮತ್ತು ಸುತ್ತಲೂ ಜಾಗವನ್ನು ಹೇಗೆ ವಿತರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. flex-start, flex-end, ಮತ್ತು center ಸರಳವಾಗಿದ್ದರೂ, ನಿಜವಾದ ಶಕ್ತಿಯು ಜಾಗ-ವಿತರಣಾ ಮೌಲ್ಯಗಳಲ್ಲಿದೆ.

ಜಾಗ ವಿತರಣೆಯ ಒಂದು ಆಳವಾದ ನೋಟ

space-between, space-around, ಮತ್ತು space-evenly ನಡುವಿನ ಸೂಕ್ಷ್ಮ ಆದರೆ ನಿರ್ಣಾಯಕ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಸ್ಪಷ್ಟಪಡಿಸೋಣ.

• justify-content: space-between;

  ಈ ಮೌಲ್ಯವು ಮುಖ್ಯ ಆಕ್ಸಿಸ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಸಮಾನವಾಗಿ ವಿತರಿಸುತ್ತದೆ. ಮೊದಲ ಐಟಂ ಅನ್ನು ಕಂಟೇನರ್‌ನ ಆರಂಭಕ್ಕೆ ಮತ್ತು ಕೊನೆಯ ಐಟಂ ಅನ್ನು ಕೊನೆಗೆ ತಳ್ಳಲಾಗುತ್ತದೆ. ಉಳಿದ ಎಲ್ಲಾ ಜಾಗವನ್ನು ಐಟಂಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ವಿಂಗಡಿಸಲಾಗುತ್ತದೆ. ಹೊರಗಿನ ಅಂಚುಗಳಲ್ಲಿ ಯಾವುದೇ ಜಾಗವಿರುವುದಿಲ್ಲ.

  ಬಳಕೆಯ ಸಂದರ್ಭ: ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ಗಳಿಗೆ ಪರಿಪೂರ್ಣ, ಇದರಲ್ಲಿ ನೀವು ಲೋಗೋವನ್ನು ತೀರಾ ಎಡಕ್ಕೆ ಮತ್ತು ಲಿಂಕ್‌ಗಳನ್ನು ತೀರಾ ಬಲಕ್ಕೆ, ಲಿಂಕ್‌ಗಳ ನಡುವೆ ಸಮಾನ ಅಂತರದೊಂದಿಗೆ ಇರಿಸಲು ಬಯಸುತ್ತೀರಿ.

• justify-content: space-around;

  ಈ ಮೌಲ್ಯವು ಪ್ರತಿ ಐಟಂನ ಸುತ್ತಲೂ ಸಮಾನ ಜಾಗದೊಂದಿಗೆ ಐಟಂಗಳನ್ನು ವಿತರಿಸುತ್ತದೆ. ಪ್ರತಿ ಐಟಂನ ಎಡ ಮತ್ತು ಬಲ ಬದಿಗಳಲ್ಲಿ ಜಾಗದ "ಗುಳ್ಳೆ" ಇದೆ ಎಂದು ಯೋಚಿಸಿ. ಪಕ್ಕದ ಐಟಂಗಳ ಗುಳ್ಳೆಗಳು ಸೇರಿದಾಗ, ಅವುಗಳ ನಡುವಿನ ಜಾಗವು ಕಂಟೇನರ್‌ನ ಅಂಚುಗಳಲ್ಲಿನ ಜಾಗಕ್ಕಿಂತ ಎರಡು ಪಟ್ಟು ಕಾಣುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಹೊರಗಿನ ಅಂಚುಗಳಲ್ಲಿನ ಜಾಗವು ಐಟಂಗಳ ನಡುವಿನ ಜಾಗದ ಅರ್ಧದಷ್ಟು ಇರುತ್ತದೆ.

  ಬಳಕೆಯ ಸಂದರ್ಭ: ಕಾರ್ಡ್ ಲೇಔಟ್‌ಗಳು ಅಥವಾ ಗ್ಯಾಲರಿಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ಐಟಂಗಳು ಕಂಟೇನರ್‌ನ ಅಂಚುಗಳಿಂದ ಸ್ವಲ್ಪ ಅಂತರವನ್ನು ಹೊಂದಿರಬೇಕು, ಆದರೆ ಅವುಗಳಿಗೆ ತಾಗಿಕೊಂಡಿರಬಾರದು.

• justify-content: space-evenly;

  ಇದು ಮೂರರಲ್ಲಿ ಅತ್ಯಂತ ಸಹಜವಾದದ್ದು. ಇದು ಯಾವುದೇ ಎರಡು ಐಟಂಗಳ ನಡುವಿನ ಜಾಗವು ಮೊದಲ/ಕೊನೆಯ ಐಟಂ ಮತ್ತು ಕಂಟೇನರ್ ಅಂಚಿನ ನಡುವಿನ ಜಾಗಕ್ಕೆ ನಿಖರವಾಗಿ ಸಮನಾಗಿರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಅಂತರವೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ.

  ಬಳಕೆಯ ಸಂದರ್ಭ: ನಿಮಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಮತೋಲಿತ, ಸಮ್ಮಿತೀಯ ಲೇಔಟ್ ಅಗತ್ಯವಿದ್ದಾಗ ಇದು ಸೂಕ್ತವಾಗಿದೆ. ವಿನ್ಯಾಸಕರು "ಸಮಾನ ಅಂತರ" ಕೇಳಿದಾಗ ಅವರು ಪರೋಕ್ಷವಾಗಿ ಇದನ್ನೇ ಬಯಸುತ್ತಾರೆ.

align-items ಮತ್ತು align-self ನೊಂದಿಗೆ ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಅಲೈನ್ಮೆಂಟ್ ಅನ್ನು ಜಯಿಸುವುದು

justify-content ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಅನ್ನು ನಿಭಾಯಿಸಿದರೆ, align-items ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಉದ್ದಕ್ಕೂ ಐಟಂಗಳ ಡೀಫಾಲ್ಟ್ ಅಲೈನ್ಮೆಂಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

`align-items` ಮೌಲ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

• align-items: stretch; (ಡೀಫಾಲ್ಟ್): ಇದೇ ಕಾರಣಕ್ಕಾಗಿ ನಿಮ್ಮ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳು ನೀವು ಕೇಳದೆಯೇ ತಮ್ಮ ಕಂಟೇನರ್‌ನ ಎತ್ತರವನ್ನು ತುಂಬುವಂತೆ ಕಾಣುತ್ತವೆ. ಐಟಂಗಳು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಉದ್ದಕ್ಕೂ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ತುಂಬಲು ಹಿಗ್ಗುತ್ತವೆ (ಉದಾಹರಣೆಗೆ, flex-direction: row ಕಂಟೇನರ್‌ನಲ್ಲಿ ಎತ್ತರ).
• align-items: flex-start;: ಐಟಂಗಳು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್‌ನ ಆರಂಭದಲ್ಲಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
• align-items: flex-end;: ಐಟಂಗಳು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್‌ನ ಕೊನೆಯಲ್ಲಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
• align-items: center;: ಐಟಂಗಳು ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್ ಉದ್ದಕ್ಕೂ ಕೇಂದ್ರದಲ್ಲಿರುತ್ತವೆ.
• align-items: baseline;: ಇದು ಶಕ್ತಿಯುತ ಮತ್ತು ಕಡಿಮೆ ಬಳಕೆಯಲ್ಲಿರುವ ಮೌಲ್ಯವಾಗಿದೆ. ಐಟಂಗಳು ತಮ್ಮ ಪಠ್ಯದ ಬೇಸ್‌ಲೈನ್‌ಗಳು ಸಾಲಾಗಿ ಬರುವಂತೆ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ. ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿರುವ ಐಟಂಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, ಉಪಶೀರ್ಷಿಕೆಯ ಪಕ್ಕದಲ್ಲಿ ಮುಖ್ಯ ಶೀರ್ಷಿಕೆ) ನೀವು ಹೊಂದಿರುವಾಗ ಮತ್ತು ಅವುಗಳನ್ನು ಕೇವಲ ಬಾಕ್ಸ್ ಗಡಿಗಳಿಂದಲ್ಲದೆ ಪಠ್ಯರೂಪದಲ್ಲಿ ಜೋಡಿಸಲು ಬಯಸಿದಾಗ ಇದು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದೆ.

align-self ನೊಂದಿಗೆ ಓವರ್‌ರೈಡ್ ಮಾಡುವುದು

ಒಂದು ನಿರ್ದಿಷ್ಟ ಐಟಂ ಇತರವುಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ ವರ್ತಿಸಬೇಕೆಂದು ನೀವು ಬಯಸಿದರೆ ಏನು ಮಾಡುವುದು? ಅಲ್ಲಿಯೇ align-self ಬರುತ್ತದೆ. ಇದನ್ನು ಪ್ರತ್ಯೇಕ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗೆ ಅನ್ವಯಿಸಿದಾಗ, ಅದು ಆ ಐಟಂಗೆ ಮಾತ್ರ ಕಂಟೇನರ್‌ನ align-items ಪ್ರಾಪರ್ಟಿಯನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡುತ್ತದೆ. ಇದು align-items ನಂತೆಯೇ ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ (ಜೊತೆಗೆ `auto`, ಇದು ಅದನ್ನು ಕಂಟೇನರ್‌ನ ಮೌಲ್ಯಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ).

ಉದಾಹರಣೆ: align-items: center ನೊಂದಿಗೆ ಕೇಂದ್ರದಲ್ಲಿರುವ ಕಾರ್ಡ್‌ಗಳ ಸಾಲನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಒಂದು "ವಿಶೇಷ" ಕಾರ್ಡ್‌ಗೆ align-self: stretch; ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ ಅದನ್ನು ಇತರವುಗಳಿಗಿಂತ ಎತ್ತರವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಬಹುದು.

ಗುಪ್ತಗಾಮಿನಿ: align-content ನೊಂದಿಗೆ ಸುಧಾರಿತ ವಿತರಣೆ

ಇದು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಬಹುಶಃ ಅತ್ಯಂತ ತಪ್ಪಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳಲಾದ ಪ್ರಾಪರ್ಟಿಯಾಗಿದೆ, ಮತ್ತು ಇದರಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಸಾಧಿಸುವುದು ಸುಧಾರಿತ ಪರಿಣತಿಯ ಸಂಕೇತವಾಗಿದೆ. ಇದರ ಮತ್ತು align-items ನಡುವಿನ ಹೋಲಿಕೆಯು ಗೊಂದಲದ ಸಾಮಾನ್ಯ ಅಂಶವಾಗಿದೆ.

ಇಲ್ಲಿ ನಿರ್ಣಾಯಕ ನಿಯಮವಿದೆ: ನಿಮ್ಮ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳು ಒಂದೇ ಸಾಲಿನಲ್ಲಿದ್ದಾಗ align-content ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಇದು ನೀವು ಬಹು-ಸಾಲಿನ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಹೊಂದಿರುವಾಗ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುತ್ತದೆ (ಅಂದರೆ, ನೀವು flex-wrap: wrap; ಅನ್ನು ಹೊಂದಿಸಿದ್ದರೆ ಮತ್ತು ಐಟಂಗಳು ವಾಸ್ತವವಾಗಿ ಹೊಸ ಸಾಲುಗಳಿಗೆ ಸುತ್ತಿಕೊಂಡಿದ್ದರೆ).

ಇದನ್ನು ಈ ರೀತಿ ಯೋಚಿಸಿ:

• align-items ಐಟಂಗಳನ್ನು ಅವುಗಳ ಸಾಲಿನೊಳಗೆ ಜೋಡಿಸುತ್ತದೆ.
• align-content ಸಾಲುಗಳನ್ನೇ ಕಂಟೇನರ್‌ನೊಳಗೆ ಜೋಡಿಸುತ್ತದೆ. ಇದು ಐಟಂಗಳ ಸಾಲುಗಳ ನಡುವೆ ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್‌ನಲ್ಲಿ ಜಾಗದ ವಿತರಣೆಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.

ಇದು ಮೂಲಭೂತವಾಗಿ justify-content ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಕ್ರಾಸ್ ಆಕ್ಸಿಸ್‌ಗಾಗಿ. ಇದರ ಮೌಲ್ಯಗಳು ಬಹುತೇಕ ಒಂದೇ ಆಗಿರುತ್ತವೆ:

• align-content: flex-start; (ಡೀಫಾಲ್ಟ್): ಎಲ್ಲಾ ಸಾಲುಗಳು ಕಂಟೇನರ್‌ನ ಆರಂಭದಲ್ಲಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
• align-content: flex-end;: ಎಲ್ಲಾ ಸಾಲುಗಳು ಕೊನೆಯಲ್ಲಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
• align-content: center;: ಎಲ್ಲಾ ಸಾಲುಗಳು ಕೇಂದ್ರದಲ್ಲಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
• align-content: space-between;: ಮೊದಲ ಸಾಲು ಆರಂಭದಲ್ಲಿ, ಕೊನೆಯ ಸಾಲು ಕೊನೆಯಲ್ಲಿ ಇರುತ್ತದೆ, ಮತ್ತು ಜಾಗವನ್ನು ಸಾಲುಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ವಿತರಿಸಲಾಗುತ್ತದೆ.
• align-content: space-around;: ಪ್ರತಿ ಸಾಲಿನ ಸುತ್ತಲೂ ಸಮಾನ ಜಾಗವನ್ನು ಇರಿಸಲಾಗುತ್ತದೆ.
• align-content: space-evenly;: ಪ್ರತಿ ಸಾಲಿನ ನಡುವಿನ ಅಂತರವು ಒಂದೇ ಆಗಿರುತ್ತದೆ.
• align-content: stretch;: ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಾಲುಗಳು ಹಿಗ್ಗುತ್ತವೆ.

ಬಳಕೆಯ ಸಂದರ್ಭ: ಐಟಂಗಳು ಸುತ್ತುವ ಫೋಟೋ ಗ್ಯಾಲರಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಂಟೇನರ್ ನಿಗದಿತ ಎತ್ತರವನ್ನು ಹೊಂದಿದ್ದರೆ, ಹೆಚ್ಚುವರಿ ಲಂಬ ಜಾಗ ಉಳಿದಿರಬಹುದು. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಈ ಜಾಗವು ಕೆಳಭಾಗದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. align-content: space-between; ಅಥವಾ align-content: center; ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಫೋಟೋಗಳ ಗ್ರಿಡ್‌ನ ಲಂಬ ವಿತರಣೆಯನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು, ಇದರಿಂದ ಹೆಚ್ಚು ವೃತ್ತಿಪರವಾಗಿ ಕಾಣುವ ಲೇಔಟ್ ಅನ್ನು ರಚಿಸಬಹುದು.

ಡೈನಾಮಿಕ್ ಗಾತ್ರ ಮತ್ತು ವಿತರಣೆ: flex ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್

ಸ್ಥಿರ ಲೇಔಟ್‌ಗಳು ಅಪರೂಪ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ನಿಜವಾದ ಶಕ್ತಿಯು ಡೈನಾಮಿಕ್ ಕಂಟೆಂಟ್ ಮತ್ತು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ನಿಭಾಯಿಸುವ ಅದರ ಸಾಮರ್ಥ್ಯದಿಂದ ಬರುತ್ತದೆ. ಇದನ್ನು ಮೂರು ಪ್ರಾಪರ್ಟಿಗಳಿಂದ ನಿಯಂತ್ರಿಸಲಾಗುತ್ತದೆ, ಇವುಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ flex ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಮೂಲಕ ಹೊಂದಿಸಲಾಗುತ್ತದೆ: flex-grow, flex-shrink, ಮತ್ತು flex-basis.

1. flex-basis: ಆರಂಭಿಕ ಬಿಂದು

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

• ಒಂದು ನಿರ್ದಿಷ್ಟ ಉದ್ದಕ್ಕೆ ಹೊಂದಿಸಿದರೆ (ಉದಾ., 200px ಅಥವಾ 10rem), ಅದು ಐಟಂನ ಆರಂಭಿಕ ಗಾತ್ರವಾಗುತ್ತದೆ.
• auto ಗೆ ಹೊಂದಿಸಿದರೆ, ಅದು ಐಟಂ ಮೇಲೆ `width` ಅಥವಾ `height` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹುಡುಕುತ್ತದೆ. ಯಾವುದೂ ಇಲ್ಲದಿದ್ದರೆ, ಅದು ಐಟಂನ ಕಂಟೆಂಟ್ ಆಧರಿಸಿ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
• 0 ಗೆ ಹೊಂದಿಸಿದರೆ, ಐಟಂಗೆ ಯಾವುದೇ ಆರಂಭಿಕ ಗಾತ್ರವಿರುವುದಿಲ್ಲ ಮತ್ತು ಅದರ ಅಂತಿಮ ಗಾತ್ರವು ಸಂಪೂರ್ಣವಾಗಿ ಅದರ flex-grow ಅನುಪಾತದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸ: ಫ್ಲೆಕ್ಸ್ ಸಂದರ್ಭದಲ್ಲಿ `width` ಬದಲಿಗೆ flex-basis ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮ, ಏಕೆಂದರೆ ಇದು ಮುಖ್ಯ ಆಕ್ಸಿಸ್‌ನ ಸಂದರ್ಭದಲ್ಲಿ ಐಟಂನ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಬಗ್ಗೆ ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿದೆ.

2. flex-grow: ಧನಾತ್ಮಕ ಜಾಗವನ್ನು ಬಳಸುವುದು

ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ತನ್ನ ಮುಖ್ಯ ಆಕ್ಸಿಸ್ ಉದ್ದಕ್ಕೂ ಹೆಚ್ಚುವರಿ ಜಾಗವನ್ನು ಹೊಂದಿರುವಾಗ, flex-grow ಆ ಜಾಗವನ್ನು ಹೇಗೆ ವಿತರಿಸಬೇಕೆಂದು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದು ಏಕಮಾನ-ರಹಿತ ಅನುಪಾತವಾಗಿದೆ.

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

3. flex-shrink: ಋಣಾತ್ಮಕ ಜಾಗವನ್ನು ನಿಭಾಯಿಸುವುದು (ಓವರ್‌ಫ್ಲೋ)

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

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

flex ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್: ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸೇರಿಸುವುದು

flex ಪ್ರಾಪರ್ಟಿಯು flex-grow, flex-shrink, ಮತ್ತು flex-basis ಗಾಗಿ ಒಂದು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಆಗಿದೆ, ಅದೇ ಕ್ರಮದಲ್ಲಿ.

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

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

ಸನ್ನಿವೇಶ 1: ಸ್ಟಿಕ್ಕಿ ಫೂಟರ್ (ಹೋಲಿ ಗ್ರೇಲ್ ಲೇಔಟ್)

ಒಂದು ಕ್ಲಾಸಿಕ್ ವೆಬ್ ಡಿಸೈನ್ ಸಮಸ್ಯೆ: ಕಂಟೆಂಟ್ ಕಡಿಮೆ ಇದ್ದಾಗಲೂ ಪುಟದ ಕೆಳಭಾಗಕ್ಕೆ ಫೂಟರ್ ಅನ್ನು ಅಂಟಿಸುವುದು ಹೇಗೆ, ಆದರೆ ಕಂಟೆಂಟ್ ಉದ್ದವಾದಾಗ ಸ್ವಾಭಾವಿಕವಾಗಿ ಕೆಳಗೆ ತಳ್ಳಲ್ಪಡುವಂತೆ ಮಾಡುವುದು.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

ಮುಖ್ಯ ಪುಟದ ಕಂಟೇನರ್ ಅನ್ನು ಕಾಲಮ್-ಆಧಾರಿತ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಪ್ರದೇಶಕ್ಕೆ flex-grow: 1 ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ನಾವು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಲಂಬ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಅದಕ್ಕೆ ಹೇಳುತ್ತೇವೆ, ಫೂಟರ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಕೆಳಭಾಗಕ್ಕೆ ತಳ್ಳುತ್ತದೆ.

ಸನ್ನಿವೇಶ 2: ಗುಂಪುಗಳನ್ನು ವಿಭಜಿಸಲು ಆಟೋ ಮಾರ್ಜಿನ್‌ಗಳು

ನೀವು ತೀರಾ ಎಡಕ್ಕೆ ಲೋಗೋ ಮತ್ತು ತೀರಾ ಬಲಕ್ಕೆ ಲಿಂಕ್‌ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತೀರಿ? ಲೋಗೋ ಒಂದೇ ಫ್ಲೆಕ್ಸ್ ಐಟಂ ಆಗಿದ್ದರೆ justify-content: space-between ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಬಲಭಾಗದಲ್ಲಿ ಅನೇಕ ಐಟಂಗಳು ಇದ್ದರೆ ಏನು ಮಾಡುವುದು?

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿನ ಆಟೋ ಮಾರ್ಜಿನ್‌ಗಳ ಮ್ಯಾಜಿಕ್ ಇದರ ಪರಿಹಾರವಾಗಿದೆ.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

ಒಂದು ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಆಟೋ ಮಾರ್ಜಿನ್ ಅದು ಅನ್ವಯಿಸಲಾದ ದಿಕ್ಕಿನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಜಾಗವನ್ನು ದುರಾಸೆಯಿಂದ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್‌ಗಳ ಗುಂಪಿಗೆ margin-left: auto ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ಇದು ಲೋಗೋ ಮತ್ತು ಲಿಂಕ್‌ಗಳ ನಡುವೆ ಹೊಂದಿಕೊಳ್ಳುವ, ಖಾಲಿ ಜಾಗವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಲಿಂಕ್‌ಗಳನ್ನು ಪೂರ್ತಿಯಾಗಿ ಬಲಕ್ಕೆ ತಳ್ಳುತ್ತದೆ.

ಸನ್ನಿವೇಶ 3: ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್

ಒಂದು ಸಾಮಾನ್ಯ ಯುಐ ಪ್ಯಾಟರ್ನ್ ಒಂದು ಬದಿಯಲ್ಲಿ ಚಿತ್ರ ಅಥವಾ ಐಕಾನ್ ಮತ್ತು ಇನ್ನೊಂದು ಬದಿಯಲ್ಲಿ ವಿವರಣಾತ್ಮಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಪಠ್ಯವು ಉಳಿದ ಎಲ್ಲಾ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬೇಕು ಮತ್ತು ಸುಂದರವಾಗಿ ಸುತ್ತಿಕೊಳ್ಳಬೇಕು.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

ಇಲ್ಲಿ, ಪಠ್ಯ ಕಂಟೇನರ್ ಮೇಲಿನ flex-grow: 1 ಪ್ರಮುಖವಾಗಿದೆ. ಇದು ಚಿತ್ರವು ಎಷ್ಟೇ ಅಗಲವಾಗಿದ್ದರೂ, ಪಠ್ಯ ಭಾಗವು ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಉಳಿದ ಅಗಲವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ: ಅಲೈನ್ಮೆಂಟ್ ಮೀರಿ, ಉದ್ದೇಶಪೂರ್ವಕ ಲೇಔಟ್‌ನತ್ತ

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಸಾಧಿಸುವುದು ಎಂದರೆ ಕೇವಲ ವಸ್ತುಗಳನ್ನು ಕೇಂದ್ರಕ್ಕೆ ತರುವುದನ್ನು ಮೀರಿ ಸಾಗುವುದು. ಇದು ಆಕ್ಸಿಸ್‌ಗಳ ನಡುವಿನ ಪರಸ್ಪರ ಕ್ರಿಯೆ, ಜಾಗ ವಿತರಣೆಯ ತರ್ಕ, ಮತ್ತು ಐಟಂ ಗಾತ್ರದ ನಮ್ಯತೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಾಗಿದೆ. ಬಹು-ಸಾಲಿನ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ align-content, ಡೈನಾಮಿಕ್ ಗಾತ್ರಕ್ಕಾಗಿ flex ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್, ಮತ್ತು ಆಟೋ ಮಾರ್ಜಿನ್‌ಗಳಂತಹ ಶಕ್ತಿಯುತ ಪ್ಯಾಟರ್ನ್‌ಗಳ ಮೇಲೆ ದೃಢವಾದ ಹಿಡಿತವನ್ನು ಹೊಂದುವ ಮೂಲಕ, ನೀವು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುವುದು ಮಾತ್ರವಲ್ಲದೆ, ದೃಢ, ರೆಸ್ಪಾನ್ಸಿವ್, ಮತ್ತು ಶಬ್ದಾರ್ಥವಾಗಿ ಸ್ವಚ್ಛವಾಗಿರುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.

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