flex 的三个参数 flex:1 0 auto

flex :flex-group flex-shirk flex-basis

① flex-group 剩余空间索取

默认值为0，不索取

eg:父元素400，子元素A为100px，B为200px.则剩余空间为100

此时A的flex-group为1，B为2，

则A=100px+100 1/3 B=200px+100 2/3

② flex-shrik 子元素总宽度大于复制元素如何缩小

父400px,A 200px B 300px

AB总宽度超出父元素100px

如果A不减少，则flex-shink ：0,B减少；

② flex-basis

该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。

<!-- 容器属性 -->

<!-- 如果a未开启  flexd性布局，则内部三个盒子会自上而下排列 -->

<!-- 如果a开启  flexd性布局，则内部三个盒子会自左向右 -->

<!-- justify-content: center沿着横轴方向变化 对其 靠左 靠右  -->

<!--   align-items: center 沿着数轴方向变化  对其 靠上 靠下 -->

<!--  flex-direction: row按行排列 ，，，如果就是row-reverse，内部项目就是cba,顺序反转-->

<!--  flex-direction: column按列排列 ，，，如果就是column-reverse，内部项目就是cba,顺序反转-->

<!--  flex-wrap: nowrap如果项目宽度大于容器宽度，那么项目会等分容器宽度，不换行-->

<!--  flex-wrap: wrap如果项目宽度大于容器宽度，那么项目会不会等分容器宽度，按照自身宽度排列，，换行-->

<!-- 项目属性  oder,flex ,align-self-->

<!-- flex-grow: 1,如果三个盒子都使用了，那么自身设置的宽度大小不起作用，，会按照flex-grow:等分父亲的宽度（用于等宽的设置），-->

<!-- flex-basis盒子的起始大，可以设置大小 -->

<!-- flex-shrink父元素 在缩小，，子元素等比例缩小，属性值为0的，，就是不可被压缩的-->

<!-- align-self子元素在竖轴上  利用这个设置可以改变  父元素指定的位置  center,或者flex-end-->

在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。子元素的宽度就自适应了。

造成此问题的原因是因为，felx布局下有一个属性flex-shrink

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

解决办法

1.子元素设置

2.子元素使用min-width代替width (此方法一般起不到很大的作用，只能解决宽度失效的问题，但会带来很多副作用：比如当子元素内容超出长度是，子元素的宽度就不再固定)

3.子元素设置

---