flex下width的设置原则

半山

Gogofun

flex 是个好东西，可以帮助我们解决一般情况下布局问题，作为css3的属性特别适合用于解决一维的布局情况，比如实现左边固定，右边自适应; 中间固定，两边自适应; 右边固定，左边自适应, 左右高度同步等情景。

今天要讲一下flex 下width的设定的一些情况，

默认情况下，flex-basis 是用于设定元素的基本宽度，flex-shrink 用于设定元素的宽度缩小， flex-grow 用于设定元素的宽度的扩张。当两个元素同时设置flex-grow的值时，会根据其值的比例来分配宽度值，flex-shrink 同理

首先wrapper设置为flex之后，其子元素已经不是简单的block了，可以理解为一个flex-block的元素，其表现为非块级元素，不具有主动换行的特性，其宽度遵从自己的一套宽度原则，具体如下表显示：

	元素A有width	元素A无width	元素B有width	元素B无width
元素A有flex	以width为标准	两个元素都没有width时以flex为标准	以width为标准	两个元素都没有width时以flex为标准
元素A无flex	同上	同上	同上	同上
元素B有flex	同上	同上	同上	同上
元素B无flex	同上	同上	同上	同上

总结一下：

当有一个元素设置了width, 则flex的设置失效, 设置为flex的元素依据被动宽度或者文字宽度设置宽度值
当两个元素都设置了width，flex的设置失效，以最大width最大值为依据，另一个元素设置为被动宽度
当一个元素设置了flex, 以flex规则去设置width值，另一个元素设置文本宽度值
当两个元素都没有设置flex值，同时wrapper没有设置justify-content, 子元素宽度显示文本宽度

有例外情况，上面讲到子元素可以简单的理解为flex-block，这是在子元素未设置其他值的情况下，如果子元素设置为table/ inline-table, 则子元素的宽度不受flex影响，inline-table / table 的宽度不能设置width来指定，但是flex的设置依然生效。

特别注意： flex 下，子元素width: 100%的情况，适用于上面列举的情况。

table/ inline-table 与 table-cell 配合使用的情况：

同样width: 100%异常的情况还有display: table / inline-table, 在有子元素是display: table-cell的情况下，另外的子元素width: 100%时并不能拿到父元素的100%宽度，其宽度的计算是根据其他子元素的文本宽度(或者设置的width值)相减得到的。

<div class="wrapper">
    <div class="table-cell">
      <div class="inner-table-cell">aa</div>
      <div class="inner-table-cell2">aa2</div>
    </div>
    <div class="sibling"></div>
  </div>

.wrapper {
  display: flex;
  width: 200px;
.table-cell{
  display: table;
  width: 200px;
  border: 1px solid gray;
.inner-table-cell{
  width: 30px;
  display: table-cell;
  border: 1px solid gray;
  /* width: 1px; */   // 宽度设置最小值，让其使用文本宽度
.inner-table-cell2{
  width: 100%;
   display: inline-block;
.sibling{
  width: 100%;
  border: 1px solid yellow;
  display: inline-block;
  /* flex:1; */
}

flex 的例子

<div class="wrapper">
    <div class="inline">inline</div>
    <div class="sibling">sibling</div>
</div>

.wrapper {
  display: flex;
  width: 200px;
.sibling{
  width: 100%;
  border: 1px solid yellow;
  display: inline-block;
  /* flex:1; */