在使用flex布局的时候，有时得到的结果和预期不相符，于是记录了一下在小程序中width:100%的表现。

正常布局

1. width属性在w3c中是这样定义的：width定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。但是行内非替换元素会忽略这个属性。
2. width的默认值是auto，表示宽度是可变动的，使用了auto属性的view的content+margin+padding+border相加为父元素的width大小，宽度与其内容无关。在不设置width的时候默认是auto，对某个元素使用position的时候会显示出不同的效果，可以选择清除浮动或者设置width为x%，来调整样式。
3. width:100%定义基于包含块（父元素）宽度的百分比宽度，子元素的width将会充满父元素的content，此时给子元素附加margin的时候并不是改变子元素的大小而是直接使得子元素溢出父元素。

实例

正常布局下width:auto的表现

代码展示:

<!-- wxml -->
<view class="width-demo-father">
  <view class='width-demo-son'>1111</view>
</view>
<!-- wxss -->
.width-demo-father {
  border: 1rpx solid red;
  margin-bottom: 30rpx;
}
.width-demo-son {
  width: auto;
  border: 1rpx solid yellow;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  height: 200rpx;
  background: pink;
}

解析：此时子view块的content+margin+padding+border的宽度为父元素的width大小，不会溢出父元素。
正常布局下width:100%的表现

<!-- wxml -->
<view class="width-demo-father">
  <view class='width-demo-son-100' style='width:100%'>2222</view>
</view>
<!-- wxss -->
.width-demo-son-100 {
  border: 1rpx solid black;
  margin-left: 20rpx;
  height: 200rpx;
}

解析：子元素设置为width:100%且设置margin:left 20rpx的情况下溢出父元素。

修正

评论中指出了flex一节中的错误，重新对文章flex相关内容进行了补充。
flex是Flexible Box的缩写，意思是灵活的布局，，使用flex布局可以快速的完成页面布局。flex布局使用相当简单：指定一个元素为flex容器，指定后容器内部的元素就可以使用flex来进行布局。
flex容器相关属性有flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content属性。
flex容器子元素又可称为项目有order、flex-basis、flex-grow、flex-shrink、flex、align-self属性，其中flex-basis，flex-grow,flex-shrink三个属性会影响子元素的大小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值是auto即项目本来的大小。

<view class='main5'>
  <view>1017</view>
  <view>1018</view>
  <view>1019</view>
</view>

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex;

}

.main5>view {
  background: red;
  width: 200rpx;  
  flex-basis: auto;
}

当flex的主轴方向为水平轴的时候，设置flex-basis：0%后项目的宽度会失效，即使声明了项目宽度也不起作用。

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; /*父div设置该属性*/
}

.main5>view {
  background: red;
  width: 200rpx;
  /* flex-basis: auto; */
  flex-basis: 0%;
}

当flex指定主轴方向为竖直轴的时候，flex-basis会影响高度。
flex-grow定义项目的放大比例，默认值为0，即使存在剩余空间也不会放大。 flex-shrink: 定义了项目的缩小比例。默认值为1，即如果空间不足，该项目将缩小。在同一时间，flex-shrink 和 flex-grow 只有一个能起作用。
当容器未设置flex-wrap:wrap的情况，且子元素宽度不充满整个容器此时flex-grow会起作用，如果子项目flex-grow均设置为1，则子项目会平分剩余空间。

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; 
}

.main5>view {
  background: red;
  width: 200rpx;
  /* flex-shrink: 1; */
  flex-grow: 1;
  flex-basis :auto;
}

当容器未设置flex-wrap:wrap的情况，且子元素宽度充满整个容器此时flex-shrink会起作用，如果子项目flex-shrink均设置为1，则子项目会等比例缩小。

.main6 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; 
}

.main6>view {
  background: pink;
  width: 400rpx;
  flex-shrink: 1;
  flex-basis :auto;
  border: 1rpx solid black;
}

flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值是 0 1 auto，推荐使用flex属性来控制子项目。