【二】Flex -item

image.png

1. flex-grow 增长比例（空间过多时）属性，取值为数字。也就是说多余的空间按照几比几的比例分给元素

html这样写

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS这样写

.parent{
  width:400px;
  background:#aaa;
  height:100px;
  display:flex;
}
.child{
  margin:0 5px;
  background:#fff;
  height:100px;
  width:40px;
}

效果： image.png

在css中添加如下代码：表示剩余空间按 1:1:1比例进行分布

.child:nth-child(1){
  flex-grow:1
}
.child:nth-child(2){
  flex-grow:1
}
.child:nth-child(3){
  flex-grow:1
}

效果：

image.png

2. flex-shrink收缩比例（空间不够时，一般不用，理解为空间不够的时候收多少，值越大收的越多）

image.png

3. flex-basis(一般不用) 如果不写就是原始大小，如果写了就按照你写的改变

image.png

4. flex(上面的缩写 ) flex:1 2 100px = flex-grow:1;flex-shrink:2;flex-basis:100px 空间多的时候将多余空间全部吃掉，如果空间不够的话缩2份，起始大小为100px (感觉超过了100px对不对？ 因为他吃了多余的空间)

这里超过了100px是因为他吃了多余的空间

image.png

5. order 顺序（双飞翼）ie8不支持 通过改变CSS 来改变他们的展示顺序 Order的值是相对于自身的，可以取负值

html这样写

image.png

css这样写

image.png

效果：

image.png

6. align-self(自身的对齐方式)（取值为center /flex-end）

image.png

几个手机常用布局

1.

image.png

2.

image.png

3.

image.png

4.完美居中

image.png