Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.Īn example with the justify-content property, demonstrating the different options. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘center’. Space-around Flex items are evenly distributed in the line, with half-size spaces on either end. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘flex-start’. Space-between Flex items are evenly distributed in the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) The justify-content property aligns flex items along the main axis of the current line of the flex container, similarly to how align-items aligns items in. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. align-content described in the spec as for 'packing flex lines' controls space between flex lines on the cross axis. align-self controls alignment of an individual flex item on the cross axis. align-items controls alignment of all items on the cross axis. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.Ĭenter Flex items are packed toward the center of the line. justify-content controls alignment of all items on the main axis. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.įlex-end Flex items are packed toward the end of the line. Values flex-start Flex items are packed toward the start of the line. Overview table Initial value flex-start Applies to flex containers The justify-content property aligns flex items along the main axis of the current line of the flex container, similarly to how align-items aligns items in the cross axis.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |