设置div的高度_flex下width的设置原则

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	同上	同上	同上	同上

总结一下：

1. 当有一个元素设置了width, 则flex的设置失效, 设置为flex的元素 依据 被动宽度或者文字宽度设置宽度值
2. 当两个元素都设置了width，flex的设置失效，以最大width最大值为依据，另一个元素设置为被动宽度
3. 当一个元素设置了flex, 以flex规则去设置width值，另一个元素设置文本宽度值
4. 当两个元素都没有设置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; */
}
.inline{
  width: 15%
  display: inline-table;
  flex: 1
}

首次编辑时间2020-10-30