CSS3 elastic properties and their values box

Attributes description The value
display Specify the type of HTML element box
  • flex
  • inline-flex
flex-direction A container that specify how to arrange the elastic elements
  • row: left to right lateral (left), the default arrangement
  • row-reverse: Reverse arranged laterally (right-aligned, the exhaust from the forward)
  • column: longitudinally aligned
  • column: reverse vertical arrangement, forward from the row, the last one at the uppermost row
justify-content The elastic element is aligned on the cassette axis (horizontal axis) direction
  • flex-start: Elastic item immediately to fill the line head. This is the default value. The first main-start from the outside edge of the elastic item is placed in the main-start edge of the row, and the subsequent elastic term are placed flush.
  • flex-end: to elastically project immediately filled end of the line. The first main-end from the outer edge of the elastic item is placed in the main-end edge diverted, and the subsequent elastic term are placed flush.
  • center: elasticity project is centered next to the filling. (If remaining free space is negative, the elastic overflow will also project in both directions).
  • space-between: the elastic project evenly distributed across diverted, if the remaining space is negative, or only one elastic entry, this value is equivalent to the flex-start. Otherwise, main-start edge margins and the first row of aligned elastic item, and main-end edge margins and the end of a row of aligned elastic items, and the remaining items are distributed over the elastic diverted, adjacent item equal intervals.
  • space-around: elastic draw project diverted distributed on both sides of the left half of the space. If the remaining time is negative or only one elastic item, the value is identical to center. Otherwise, the elastic diverted items along the distribution and equally spaced from each other, while leaving half of the spacing between the two sides and the elastic container end to end.
align-items An elastic element disposed cartridge-side alignment of the shaft (longitudinal) direction
  • flex-start: boundary (vertical axis) of the side shaft start position of the elastic element against the box side shaft diverted live starting boundary. I.e., aligned with the top
  • flex-end: a boundary (vertical axis) of the starting position of the elastic side shaft cassette elements abut against the end-side shaft diverted boundary. That is aligned to the lower end
  • center: the elastic elements centered position on the cassette side diverted axis (vertical axis).
  • baseline: a box element if the elastic line of the inner shaft and side shaft of the same, the value of "flex-start" equivalents. In other cases, the value will be baseline alignment
  • stretch: If the size of the margin and the side shaft size attribute specified as "auto", then it will make the value of the project as close as possible the size of the row.
flex-wrap Specify a sub-element wrap box of elasticity
  • nowrap: By default, the single line of the elastic container. Resilient children may overflow container in this case
  • wrap: elastic container into multiple lines. The overflow portion of the lower sub-items are placed into a new line, the internal line break occurs subkey
  • wrap-reverse: reverse arrangement wrap
align-content Used to modify the behavior of flex-wrap property. Similarly align-items, but it is not aligned with the elastic sub-element is provided, but set the alignment of the respective rows
  • stretch: By default, each line will be extended to occupy the remaining space
  • flex-srart: stacking, the starting position of each row the flexible pouch container
  • flex-end: the end position of each row of stacked flexible pouch container
  • center: each row of the intermediate stacked position of the elastic container cartridge
  • space-between: each of the flexible pouch container rows evenly distributed
  • space-around: the flexible pouch container in each row evenly distributed, the size of half the distance between the two retention elements and subelements
order Order in an elastic cassette subelements <Integer>: integer values ​​defined by the order, the top surface of a small value. It can be negative
margin Align auto: an elastic sub-elements are fully centered in the axial direction on the amount of the elastic container
align-self Used in the elastic sub-elements. Covering the container align-items property
  • If the 'align-self' value 'auto', it is calculated as the parent element of the element 'align-items' value, if it has no parent, then the calculated value of the 'stretch'
  • flex-start: start position of border-side shaft cassette elastic elements (vertical axis) against the diverted live starting boundary side shaft
  • flex-end: the border start position side shaft cassette elastic elements (vertical axis) against the diverted live side shaft end border
  • center: the elastic elements centered on top of the box diverted side shaft (vertical axis).
  • baseline:如果弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start’等效。其他情况下,该值将于基线对齐。
  • stretch:如果指定侧轴大小的属性值为‘auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex

设置弹性盒子的子元素如何分配空间,该属性是是flex-grow、flex-shrink、flex-basis三属性的简写总和。

  • flex-grow:定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同的放大比例。
  • flex-shrink:定义了当容器空间不足时,item是否缩小。默认值为1,表示当空间不足时,item自动缩小,其可能的值为整数,表示不同的放大比例。
  • flex-basis:表示项目在主轴上占据的空间,默认值为auto。

 

发布了39 篇原创文章 · 获赞 8 · 访问量 9182

Guess you like

Origin blog.csdn.net/cxd3341/article/details/100972895