Introduction to Flex layout elements in css (with code)

This article brings you an introduction to the Flex layout elements in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The flex layout is "flexible layout". Any element can be set to the css attribute display:flex; webkit kernel browser is display: -webkit-flex;
Specify the element as Flex layout .
Elements that adopt Flex layout are called "flex containers", and all their sub-elements are called Flex items;

Container properties

flex-direction

The arrangement direction selection value of the items: row (default value: left to right) | row-reverse (right to left) | column (top to bottom) | column-reverse (bottom to Top)

.box {
     flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

Define whether the item should be wrapped. Select the value: nowrap (default value: no line wrapping) | wrap (line wrapping, the first line is above) | reverse -wrap (line wrap, first line below)

 .box{
     flex-wrap: nowrap | wrap | wrap-reverse;
   }

flex-flow

is the abbreviation of flex-direction property and flex-wrap property. The default value is row nowrap

.box {
     flex-flow: <flex-direction> || <flex-wrap>;
   }

justify-content

Define the alignment of items on the main axis. Select the value flex-start (default left-aligned) | flex-end (right-aligned) | center (center) | space-between (aligned at both ends) | space-around (equal spacing between each item)

.box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
   }

align-items
Defines how items are aligned on the cross axis. Select values ​​flex-start (alignment of the starting point of the cross axis) | flex-end (alignment of the end point of the cross axis) | center (alignment of the midpoint of the cross axis) | baseline (baseline alignment of the first line of text of the item) | stretch (item If the height is not set or set to auto, it will occupy the entire height of the container)

 .box {
 align-items: flex-start | flex-end | center | baseline | stretch;
 }

align-content
Defines the alignment of multiple axes. This property has no effect if the project has only one axis.

.box {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

Properties of items

order

.item {
  order: <integer>;
}

flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

The above is the detailed content of Introduction to Flex layout elements in css (with code). For more information, please follow other related articles on the PHP Chinese website!