弹性盒 flex

弹性盒

• 主轴(main axis) :
  伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的; 这主要取决于“justify-项content”属性(详细见下文)
• 主轴起点(main-start) 和主轴终点( main-end)x:
  伸缩项目放置在伸缩容器内从主轴起点(main-start) 向主轴终点(main-start) 方向。
• 主轴尺寸(mainsize):
  伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。
• 侧轴(cross axis) :垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
• 侧轴起点(cross-start)和侧轴终点( cross-end) :
  伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• 侧轴尺寸(crosssize):
  伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width 」或「 height」属性，由哪一个对着侧轴方向决定。

以下属性设在容器上:

diaplay
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

以下子属性设在内部元素上:

flex-grow
flex- shrink
flex-basis
flex
order
align-self

设置弹性盒

• 语法：display:flex | inline-flex
• 说明:弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
  • flex:将对象作为弹性伸缩盒显示。
  • inline-flex:将对象作为内联块级弹性伸缩盒显示。

属性

1、flex-direction 属性

值	描述
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

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

2. flex-wrap

说明:属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值 描述

• nowrap 默认值。规定元素不拆行或不拆列。
• wrap 规定元素在必要的时候拆行或拆列。
• wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。

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

3. flex-flow 属性

说明:属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. justify-content 属性

说明: 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

5. align-items属性:

说明: 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

6. align-content属性:

说明:用于修改flex-wrap属性的行为。类似于justify-content,但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

7. flex-grow:<number> (default 0);

说明:设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
<number>:用数值来定义扩展比率。不允许负值
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的

8. flex-shrink:<number> (default 1);

说明:设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)
flex- shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
shrink的值通过加权的方式来进行缩小

9. flex-basis: < length> | auto (default auto);

说明:设置或检索弹性盒伸缩基准值
auto:无特定宽度值,取决于其它属性值
<length>:用长度值来定义宽度。不允许负值
<percentage>:用百分比来定义宽度。不允许负值

10. flex

说明:语法: flex:none | flex-grow | flex-shrink | flex-basis ;

说明:复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览
器会推算相关值。

flex用于合并指定flex-grow和flex-shrink和flex-basis属性，

值	描述
默认值为	0 1 auto
flex:1	等价于 1 1 0
auto	等价于1 1auto
none	等价于0 0 auto

11. order:<integer>;

说明:设置或检索弹性盒模型对象的子元素出现的顺序。
<integer>:用整数值来定义排列顺序，数值小的排在前面。可以为负值。

 ul li:nth-child(1) {
            background-color: rgb(245, 136, 136);
            order: 2;
        }

        ul li:nth-child(2) {
            background-color: rgb(171, 178, 243);
        }

        ul li:nth-child(3) {
            background-color: rgb(201, 7, 159);
            order: 1;
        }
        ul li:nth-child(4) {
            background-color: rgb(216, 213, 27);
        }
        ul li:nth-child(5) {
            background-color: rgb(139, 224, 122);
            order: 1;
        }

12. align-self属性

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

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。
inherit	从父元素继承该属性。