详细说明CSS3延展性伸⊙＾⊙缩式盒

主要用途

• 延展性小盒子针对前端开发web网页页面合理布局来讲，拥有至关重要的功效，手机端也是这般。把握了延展性小盒子使用方法，针对现阶段撰写响应式网页页面太重要。把握这类合理布局标准，是一项必需专业技能。
   

延展性伸缩式盒实体模型表明

• 主轴（main axis） 是顺着 flex 原素置放的方位拓宽的轴（例如网页页面上的横着的行、竖向的列）。该轴的刚开始和完毕被称作 main start 和 main end**。
• 交叉式轴（cross axis） 是竖直于 flex 原素置放方位的轴。该轴的刚开始和完毕被称作 cross start 和 cross end**。
• 设定了 display: flex 的父原素（在本例中是 <section> ）被称作 *flex 器皿（flex container）。
• 在 flex 器皿中主要表现为软性的小盒子的原素被称作 flex 项 （ flex item ）
   

常见的特性

flex-direction（特定延展性器皿中子原素排序方法）

   row 默认设置值。原素将水准显示信息，如同一个行一样。
   row-reverse 以反过来的次序。
   column 原素将竖直显示信息，如同一个列一样。
   column-reverse 与 column 同样，可是以反过来的次序。

flex-wrap （特性要求flex器皿是单行或是几行，同时横轴的方位决策了新行层叠的方位。）

  nowrap默认设置值。要求原素不拆行或不拆列。
  wrap要求原素在必需的情况下拆行或拆列。
  wrap-reverse要求原素在必需的情况下拆行或拆列，可是以反过来的顺  序。

align-items 特性界定flex子项目在flex器皿确当向前纵轴方位上的两端对齐方法，便是要求左右排名的款式。

   stretch 默认设置值。新项目被拉申以适应器皿。
   center 新项目坐落于器皿的管理中心。
   flex-start 新项目坐落于器皿的开始。
   flex-end 新项目坐落于器皿的末尾。
   baseline 新项目坐落于器皿的基准线上。

justify-content 用以设定或查找延展性小盒子原素在主轴（横轴）方位上的两端对齐方法。

  flex-start 新项目坐落于器皿的开始。
  flex-end 新项目坐落于器皿的末尾。
  center 新项目坐落于器皿的管理中心。
  space-between 新项目坐落于各行中间留出空白页的器皿内。
  space-around 新项目坐落于各行以前、中间、以后都留出空白页的器皿内。

延展性子原素特性

1.order特性

.flex-container .flex-item { order: <integer>; }

<integer>：用整数金额值而定义排序次序，标值小的排到前边。能够为负值，默认设置为0。

2.align-self设定或查找延展性小盒子原素本身在侧轴（纵轴）方位上的两端对齐方法。(跟哪个align-items相近)

之上便是详细说明CSS3延展性伸缩式盒的详尽內容，大量有关CSS3延展性伸缩式盒的材料请关心脚本制作之家其他有关文章内容！