CSS3 flexible pouch
I. Introduction:
css3 introduce a new layout mode --Flexible Box layout that stretch layout box model (elastic box layout), to provide a setting, adjustment and distribution of a container in the project layout more efficient way, even if their size It is unknown or dynamic.
The main idea is to have the ability to let the container subprojects can change its width, height (even order), the best way to fill available space (mainly in order to adapt to all types of display devices and screen size), flex container will subprojects extension to fill the available space, or reduce them to prevent overflow container, most importantly, flex reverse layout unpredictable.
Second, the term flexible pouch:
Telescopic container: the elastic box - parent element
Telescopic items: a box of sub-elements elastic
A spindle (main axis): container telescopic spindle, a telescopic main items aligned along this axis distribution; it is not horizontal; depending on the "justify-content" attribute (see details below).
Starting the spindle (main-start) and the spindle end (main-end): telescopically disposed within the telescopic container projects from the spindle start point (main-start) (main- start) direction to the spindle end.
Spindle size (main size): Item telescopic spindle direction is the width or height dimension of the spindle. The main project of the size of the property stretching either the width or the height property, which is determined by the direction toward the spindle.
Side shaft (cross axis): referred to as a side perpendicular to the spindle axis. Its direction depends on the direction of the spindle.
Starting side shaft (cross-start) and the side shaft end (cross-end): Configure the telescopic shaft line starting from the starting side edge of the holder, toward the end side of the shaft end side.
Side shaft size (cross size): Telescopic project in the width direction or the height of the side of the shaft is the length of the side of the shaft projects, the telescopic side shaft length attribute item is "width" or "height" attribute, a direction toward which a side shaft decision.
Third, the container is provided on the elastic properties (parent container):
(1) display: an elastic element is disposed cartridge
Property Value: flex / inline-flex box model into the original elasticity box model;
Effect: the internal layout of the elastic element to obtain the effect, which should be aligned vertically div sub-4, are arranged horizontally from left to right by default.
(2) flex-direction: attribute flexible project a predetermined direction (sub-elements) (set the major axis direction) .
| value | description |
|---|---|
| row | Defaults. Flexible project level will be displayed as a line of the same. |
| row-reverse | The same row, but in reverse order. |
| column | Flexible project will be displayed vertically as a column of the same. |
| column-reverse | The same column, but in reverse order. |
| initial | Setting the attribute to its default value. |
| inherit | This property is inherited from the parent element. |
(3) flex-wrap: wrapping items for setting a telescopic manner on the spindle
| value | description |
|---|---|
| nowrap | Defaults. Flexible project without removal of the provisions of the row or column is not removed. |
| wrap | Flexible project requirements when necessary demolition of a row or column demolition. |
| wrap-reverse | Flexible project requirements when necessary demolition demolition of a row or column, but in reverse order. |
| initial | Setting the attribute to its default value. |
| inherit | This property is inherited from the parent element. |
(4) flex-flow: a flex-direction and consolidates the flex-wrap attribute, the default value row nowrap, the property simply to simplify the code only;
(5) justify-content: box used to set or retrieve an elastic element is aligned on the main axis (horizontal axis) direction.
| value | description |
|---|---|
| flex-start | Defaults. The project is located at the beginning of the container. |
| flex-end | The project is located at the end of the container. |
| center | The project is located in the center of the container. |
| space-between | The project is located within the container is left blank between the rows. |
| space-around | Before the project is located in each line, between, after all left blank in the container. |
| initial | Setting the attribute to its default value. |
| inherit | This property is inherited from the parent element. |
(6) align-items: define flex children aligned on the front side of the flex shaft line of the container (longitudinal) direction (single subelement side shaft)
| value | description |
|---|---|
| stretch | Defaults. Element is stretched to fit the container. If the size of the side shaft specified attribute value 'auto', the margin size cassette will project its value as close as possible the size of the row, but at the same time limit in accordance with 'min / max-width / height' attributes. |
| center | Elements located in the center of the container. An elastic element placed centrally on the box side of the shaft of the row (vertical axis). (If the size is smaller than the size of the elastic line of the box element will overflow the same length in both directions). |
| flex-start | Elements at the beginning of the container. Boundary (vertical axis) of the side shaft start position of the elastic element abut against the box side shaft of the starting boundary line. |
| flex-end | Element at the end of the container. Boundary (vertical axis) of the side shaft start position of the elastic element abut against the box side shaft end of the boundary line. |
| baseline | The base element of the container. The elastic box element row side inner shaft and an axis of the same, the value of 'flex-start' equivalent. In other cases, the value will participate baseline alignment. |
(7) align-content: setting a plurality of lines in a sub-element side of the alignment of the container axis (effective when a plurality of rows, a plurality of rows disposed side shaft child element)
| value | description |
|---|---|
| stretch | Defaults. Element is stretched to fit the container. Each row will be extended to occupy the remaining space. If the remaining space is negative, the value is equivalent to the 'flex-start'. In other cases, the remaining space is bisected all rows, to expand the size of their side shaft. |
| center | Elements located in the center of the container. Each row stacked cassette to the intermediate position of the elastic container. |
| flex-start | Elements at the beginning of the container. Stacking each row, the starting position of the flexible pouch container. |
| flex-end | Element at the end of the container. Each row stacked cassette to the end position of the elastic container. |
| space-between | Leaving element located within the container blank between the rows. Each line in the flexible pouch container evenly distributed |
| space-around | Before each row element located between, and then are left blank in the container. Each line in the flexible pouch container evenly distributed, the size of both ends to retain a half pitch between the sub-elements and sub-elements. |
Fourth, set properties on telescopic project (sub-elements) are:
(1) align-self: attribute child defined alignment flex separately on the shaft side (longitudinal) direction.
| value | description |
|---|---|
| auto | Defaults. Elements inherited align-items property of its parent container. If no parent container compared to "stretch". |
| stretch | 元素被拉伸以适应容器。 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。 |
| center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| flex-start | 元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| baseline | 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。 |
（2）flex-grow：用于设置或检索弹性盒子的扩展比率
即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各元素增大；默认值为0，表示剩余空间不分配。
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 |
（3）flex-shrink：设置弹性盒的收缩比率
（4）flex-basis：设置了 flex 元素在主轴方向上的初始大小。它是width属性的替代品，优先级比width高
- 默认值是auto（有width参考width,没width，参考内容）
- 依赖flex项目的content
（5）order：设置弹性项目在布局时的顺序
- 默认值是0
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后。（order值越大越靠后）
（6）flex
-
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
-
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| flex-basis | 项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |