CSS弹性盒子布局

前传：弹性盒子上个学期学完了，但是最近要开始学习小程序的课程，弹性盒子在小程序的布局中可谓是相当的重要，那么就要从新拾起这块的知识，就当是复习，会的巩固，不会的重新学习。

聊一聊几种布局方式：

1. 默认布局：块元素上下排列，行内元素一行从左到右排列
2. 浮动布局：浮动可以将元素一行排列，可以设置元素靠左或靠右排列
3. 定位布局：通过定位，可以将元素放到指定的位置

我们要知道：几种布局之间不是相互取代的关系，而是互相配合，互相补充

下面介绍的flexbox（弹性盒子）布局也是如此，可以更简单的方式实现某些布局，需要上面的布局配置实现某些布局效果

对其方式：

Flex 布局有一个隐式的坐标空间，水平方向有一条主轴 (main-axis) ，垂直方向上有一条交叉轴(cross-axis)，默认情况下，元素靠主轴左侧对齐，靠交叉轴顶部对齐

父项常见属性（大盒子）

• justify-content：设置主轴上的子元素的排列方式
• align-items：设置交叉轴上的子元素的排列方式（单行）
• flex-direction：设置水平方向的排列方式
• flex-wrap：设置子元素是否可以换行
• flex-flow：简写属性，相当于flex-direction和flex-wrap的缩写形式
• align-content：设置交叉轴上的子元素的排列方式(多行)

一 justify-content

此属性控制项目在主轴上的对齐方式，设置给容器

• flex-start：默认值，靠左对齐
• center：居中对齐
• flex-end：靠右对齐
• span-between：两端对齐，两端不留空间
• space-evenly：分散对齐，所有元素都平局空间
• space-around：跟space-evenly类似，但是左右两边的留白为平分空间的1/2

二 align-items

控制元素在 交叉轴 上的对齐方式（单行）( 单行项目使用 align-items 控制，如果项目占据了多行，此属性无效 )

• stretch：默认值，它会自动把子元素拉伸成容器的高度,只要设置容器的align-items的值，他就会变成内容的高度（如果子元素本身设置了高度，stretch属性无效）
• center：居中对齐
• flex-start：元素位于容器的中心
• flex-end：元素位于容器的结尾
• baseline：元素位于容器的基线上

三 align-content

设置交叉轴上的子元素的排列方式（多行），当有多行项目，使用align-content替换align-items设置项目在交叉轴上的排列方式，两行之间就会有空隙。

• flex-start：默认值，在交叉轴靠左对齐
• center：在交叉轴居中对齐
• flex-end：在交叉轴靠右对齐
• space-around：分散对齐，但是上下两边的留白为平分空间的1/2
• space-between：两端对齐，两端不留空间

四 flex-direction

此属性控制着水平方向是主轴还是交叉轴

• flex-direction 属性的默认值是 row ，也就是说主轴与行一个方向，也就是水平方向是主轴
• flex-direction 如果设置为 column ，则垂直方向是主轴，水平方向就是交叉轴了

（若flex-direction=column此时向控制项目水平对齐方式，应该使用 align-items ，垂直方向对齐方式，应使用 justify- content 属性）

五 flex-wrap

折行，如果子元素有固定宽度，并且超出了容器的宽度，还不允许收缩的话，那么可以使用 flex-wrap 属性来 让元素进行折行排列

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

六 flex-flow

排列方向和折行的缩写

• 第一个指定flex-direction
• 第二个值指定flex-wrap

如：flex-flow:row wrap;

子项常见属性（子元素）

• order：设置子元素的排列顺序
• flex-grow：设置剩余分配空间
• flex-shring：设置元素的收缩规则
• flex-basis：设置元素在主轴方向的初始大小
• align-self：设置元素在交叉轴的对齐方式
• margin：设置元素在主轴的对齐方式
• flex：简写属性，flex-grow、flex-shring、flex-basis 三个属性的缩写形式

一  align-self

设置子元素在交叉轴的对齐方式

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

二 margin

设置子元素在主轴的对齐方式

略

三 order

设置弹性盒子的子元素排列顺序。 用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

如：

div span:nth:child(1){ order: 值}

四 flex-grow

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。flex-grow若项目的值都为1，则瓜分盒子宽度

• 负值无效，默认值为0，有剩余空间页不会扩大
• 如果某项有宽度，则减去这个宽度后才分配剩余空间

如：

div span:nth:child(1){ flex-grow: 值}

五 flex-shrink

flex-shrink属性指定子元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

• 负值无效，默认值为1，表示空间不够将缩小，则应该配合换行使用
• 如果值为0，表示空间不够不会缩小
• 如果所有项目的 flex-shring 值都为1，当空间不足时，都会等比例缩小

如：

div span:nth:child(1){ 
    width:200px
    flex-shrink: 1
}
//此时元素会缩小


div span:nth:child(1){ 
    width:200px
    flex-shrink: 0
}
//此时元素缩小到200后不会再缩小

六 flex-basis

flex-basis 指定子元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸

• 此属性的效果与设置元素的 width 属性一样，但如果与 width 属性同时存在，则优先级更高

如：

div span:nth-child(1){ flex-basis:400px }

七 flex

 简写属性，flex-grow，flex-shring，flex-basis三个属性的缩写

flex:1

表示

flex:1 1 atuo

文章都是基础用法，便于学习，更多内容今后再补