For example, if the flex-direction of your container is set to row, that is items are positioned horizontally, then the cross axis will run along the column and vice versa. Cross axis: The cross axis is the axis perpendicular to the main axis.Main axis: The main axis of a flex container is defined as the direction in which the flex items are laid out.Flex item: A flex item is a child within the flex container.This is the parent element which holds the children elements. Flex container: According to MDN, a flex container is an area of a document laid out using flexbox.Note that these terminologies will be used throughout this tutorial. ![]() In order to understand flexbox, we should first talk about some terminologies associated with flexbox. Here's a link to MDN's definition of Flexbox. Unlike other layout methods, flexbox provides an efficient way to flexibly(properly) layout, align and distribute space among items in a container. The Flexible Box Module is a layout method that distributes space along a single row or column. That said, let's get started! What is Flexbox The second part talks about flex item properties. ![]() This part focuses on what flexbox is and flexbox container properties. ![]() This is the first of a two-part series tutorial.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |