The parent container
/* define the flex container */ display: flex; / * set the orientation of container internal element row: define orientation Row from left to right - reverse: from right to left column, the column from top to bottom - reverse: from the bottom up * / flex - direction: the column; /** nowrap: wrap: wrap: reverse */ flex-wrap: wrap; /* The flex container can treat multiple axes as elements when there is more than one axis, and can be aligned to the right. */ align-content: space-around; */ align-content: space-around;Copy the codechildren
/* Overwrite the alignment of elements on the cross axis of the container. Auto: default, inheriting the parent element's align-items property. */ align-self: */ align-self: */ align-self: */ align-self: */ align-self: stretch;Copy the code/* shrink: used to set the order of each element in the Flex container. Default is 0. Flex-grow: used to set the size of each element in the Flex container. */. Red {background-color: #FF0000; background-color: #FF0000; /* order: 0; */ /* flex-grow: 2; */ flex-shrink: 0; flex-basis: 150upx; }Copy the code