Flexible layout notes

Basic flex layout concepts

The Flexible Box model, often referred to as flexbox, is a one-dimensional layout model. It provides strong spatial distribution and alignment between flexbox's child elements.Copy the code

flex-directionattribute

  • row
  • row-reverse
  • column
  • column-reverse
Row: the main axis is horizontal and the content is arranged from left to right. Row-reverse: the main axis is horizontal and the content is arranged from right to left. Colum: the main axis is vertical and the content is arranged from top to bottomCopy the code

flex-wrapattribute

flex-wrap: nowrap; Child elements do not break lines, which can cause overflow of the parent containerflex-wrap: wrap; Line wrap occurs when the child exceeds the parent, but overflows when the parent is not tall enoughflex-wrap: wrap-reverse; The child element wraps if it can exceed the parent element, but in this case it wraps upCopy the code

gapattribute

  • gap
  • row-gap
  • column-gap
/* These property names (grid-row-gap, grid-column-gap, grid-Gap) were originally set in CSS grid layouts. * /Gap: row spacing and column spacing of each element Row-gap: direct row spacing of each element column-gap: direct column spacing of each elementCopy the code

Controls the alignment

  • justify-content
  • align-items
  • align-self
  • align-content
justify-contentAlign-item: align-controls the alignment of all Flex elements on the crossed axis (vertical axis) align-self: controls the alignment of a single Flex element on the crossed axis (vertical axis) align-content: Controls alignment of Flex elements for multiple spindlesCopy the code

orderattribute

You can use the Order attribute to specify a single item and change its placement in the visual order.

Set in the child elementorderVisual order can be changed by defaultorderfor0Set laterorderthan0Small so will row in front, vice versa will row in the backCopy the code

Controls the scale of flex child elements on the main axis

  • flex-grow
  • flex-shrink
  • flex-basis
flex-growFlex -basis: how much space does a child occupy in the parent element? Flex -basis: how much space does a child occupy in the parent element? Flex -shrink: Before setting flex-shrink to0If yes, the child element is not allowed to shrink, which may cause overflow of the parent container. After setting the change value, the child element will not shrinkCopy the code