Site Layout with CSS Flexbox - Flexbox Box Alignment
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
🅕🅛🅔🅧🅑🅞🅧 🅨🅐🅟🅘🅢🅘
✔In this video, we'll cover box layouts and alignments using CSS Flexbox features. We'll also talk about placing boxes side by side or one under the other with the flexible box model, as well as distributing them evenly or evenly within a specific area.
▶ The flex-direction property determines the sorting direction of flexible boxes within a container element. It takes four values: row, row-reverse, column, and column-reverse.
✔row: Sorts flexible boxes from left to right.
✔row-reverse: Sorts flexible boxes from right to left.
✔column: Sorts flexible boxes as columns from top to bottom.
✔column-reverse: Sorts flexible boxes as rows, but from bottom to top.
▶ The justify-content property determines how elements within a flexible container are aligned along the x-axis. It takes five values: flex-start, flex-end, center, space-between, and space-around.
✔flex-start: Boxes within a flexible container are sorted starting from the beginning of the container (as specified in flex-direction).
✔flex-end: Items are sorted starting from the end.
✔center: Boxes are aligned according to the container's midline.
✔space-between: Boxes are aligned evenly. The first box is at the beginning of the center line, and the last box is at the end.
✔space-around: Boxes are aligned with equal space.
▶align-items does vertically what justify-content does horizontally. It is used to vertically align flexible boxes consisting of two or more rows. It takes six values: flex-start, flex-end, center, space-between, space-around, and stretch.
▶You can access the web address shown in the video from the link below.
● https://flexboxfroggy.com/#tr
You can access the codes used in this video from the link below. ↴
● https://drive.google.com/file/d/1WtRM...
★ ... :https://www.youtube.com/c/SOSYALBİLİŞ...
Our Useful Videos You Should Watch!
➤ Easiest Way to Format: • Format Nasıl Atılır? En Basit Yöntem İle U...
➤ Our Local Video Conferencing Program: • Video
➤ Facebook Facts: • Video
➤ Zoom Founder: • Video
Our Social Media Accounts
☛ Our Website:
☛ Instagram: / sosyalbilisim79
☛ Twitter: / sosyalbilisim79
☛ Facebook: / sosyalbilisim79
#flexbox #css #flexibleboxmodel