查看: 645|回复: 0

[DIV/CSS] flex-basis 与 width

发表于 2017-10-29 09:25:35
太阳http代理AD
说明 flex-basis属性默认值:auto

默认值表示:项目的flex-basis属性值为项目的width属性值。

width属性默认值: auto

默认值表示:项目的width属性值为项目中内容的实际宽度。

项目的实际宽度通过 项目的flex-basis属性值项目中内容的实际宽度 比较后获得。 flex项目的实际宽度 项目的width属性为auto 项目中内容的实际宽度 > 项目的flex-basis属性值 满足以上条件,项目的实际宽度: 项目的width属性值
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col">
  4. <div style="width: 250px;"></div>
  5. </div>
  6. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 800px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. width: 100px;
  9. flex-basis: auto;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. width: auto;
  14. flex-basis: 100px;
  15. }
复制代码
项目中内容的实际宽度:250px 项目的flex-basis属性值:100px 项目的实际宽度:250px

项目中内容的实际宽度 < 项目的flex-basis属性值 满足以上条件,项目的实际宽度: 项目的flex-basis属性值
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col">
  4. <div style="width: 50px;"></div>
  5. </div>
  6. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 800px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. width: 100px;
  9. flex-basis: auto;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. width: auto;
  14. flex-basis: 100px;
  15. }
复制代码
项目中内容的实际宽度:50px 项目的flex-basis属性值:100px 项目的实际宽度:100px

项目的width属性不为auto 项目不设置overflow: hidden 项目中内容的实际宽度 > 项目的flex-basis属性值 项目的width属性值 > 项目的flex-basis属性值 满足以上两个条件,项目的实际宽度: 项目的width属性值
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col">
  4. <div style="width: 250px;"></div>
  5. </div>
  6. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 800px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. width: 100px;
  9. flex-basis: auto;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. width: 200px;
  14. flex-basis: 100px;
  15. }
复制代码
项目中内容的实际宽度:250px 项目的flex-basis属性值:100px 项目的width属性值:200px 项目的实际宽度:200px

项目中内容的实际宽度 > 项目的flex-basis属性值 项目的width属性值 < 项目的flex-basis属性值 满足以上两个条件,项目的实际宽度: 项目的flex-basis属性值
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col">
  4. <div style="width: 250px;"></div>
  5. </div>
  6. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 800px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. width: 100px;
  9. flex-basis: auto;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. width: 50px;
  14. flex-basis: 100px;
  15. }
复制代码
项目中内容的实际宽度:250px 项目的flex-basis属性值:100px 项目的width属性值:50px 项目的实际宽度:100px

项目中内容的实际宽度 < 项目的flex-basis属性值 (项目的width属性值 > 项目的flex-basis属性值) 或者 (项目的width属性值 < 项目的flex-basis属性值) 满足以上两个条件,项目的实际宽度: 项目的flex-basis属性值
  1. <div class="row">
  2. <div class="col"></div>
  3. <div class="col">
  4. <div style="width: 50px;"></div>
  5. </div>
  6. <div class="col">
  7. <div style="width: 50px;"></div>
  8. </div>
  9. </div>
复制代码
  1. .row {
  2. display: flex;
  3. width: 800px;
  4. height: 100px;
  5. }
  6. .row > .col:nth-child(1) {
  7. background: red;
  8. width: 100px;
  9. flex-basis: auto;
  10. }
  11. .row > .col:nth-child(2) {
  12. background-color: green;
  13. width: 200px;
  14. flex-basis: 100px;
  15. }
  16. .row > .col:nth-child(3) {
  17. background-color: blue;
  18. width: 50px;
  19. flex-basis: 100px;
  20. }
复制代码

情况一:

项目中内容的实际宽度:50px 项目的flex-basis属性值:100px 项目的width属性值:200px 项目的实际宽度:100px

情况二:

项目中内容的实际宽度:50px 项目的flex-basis属性值:100px 项目的width属性值:50px 项目的实际宽度:100px

项目设置overflow: hidden 无论任何情况,项目的实际宽度都为flex-basis属性设置的宽度。


太阳http代理AD
回复

使用道具 举报