主页 / 问题 / 1150855
Accepted
ink Shio
Asked:2020-07-09 20:39:56 +0000 UTC2020-07-09 20:39:56 +0000 UTC

flexbox 上的结构可能有什么问题？

  • 772

我不明白为什么它会这样工作。该块似乎正在缩小，并且它在缩小。但是一旦内容出现在块中，侧边栏就会飞下来。

下面是一个示例，如果您删除box__content中的文本，它可以正常工作，如果文本出现，它会中断。

.contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}

.list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.list__content {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  background: #e7eaef;
}
.list__sidebar {
  -webkit-box-flex: 0;
          flex: 0 1 23.07692%;
  min-width: 200px;
  background: #ccc;
}
.list__row {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  background: #fff;
}

.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
}
.box__item {
  -webkit-box-flex: 0;
          flex: 0 0 33.33333%;
}
<div class="contain">
  <div class="list">
    <div class="list__content">
      <div class="box">
        <div class="box__item">1
          <div class="box__content">gar r afa swfasdfas asfas da asdf s asd a dg sdfg </div>
        </div>
        <div class="box__item">2
          <div class="box__content">asdfas asda da sdgasdg asd asgasdf asdf  asg dh dg</div>
        </div>
        <div class="box__item">3
          <div class="box__content">as das asdgasd fsadf asd asfasd asdf asda agaga asd</div>
        </div>
        <div class="box__item">4</div>
        <div class="box__item">5</div>
        <div class="box__item">6</div>
      </div>
    </div>
    <div class="list__sidebar">sidebar</div>
    <div class="list__row">row</div>
  </div>
</div>

html

2 个回答

  1. Best Answer

    也许我不太了解您的任务，但我可以建议在 .list__content: calc(100% - 200px); 中设置宽度 最大宽度：76% 并在移动版本中更改为 100%。

    • 2

  2. 你需要那样吗？

    .contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}

.list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.list__content {
  display: flex;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  background: #e7eaef;
}
.list__sidebar {
  -webkit-box-flex: 0;
          flex: 0 1 23.07692%;
  min-width: 200px;
  background: #ccc;
}
.list__row {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  background: #fff;
}

.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
}
.box__item {
  -webkit-box-flex: 0;
          flex: 0 0 33.33333%;
}
    <div class="contain">
  <div class="list">
    <div class="list__content">
      <div class="box">
        <div class="box__item">1
          <div class="box__content">gar r afa swfasdfas asfas da asdf s asd a dg sdfg </div>
        </div>
        <div class="box__item">2
          <div class="box__content">asdfas asda da sdgasdg asd asgasdf asdf  asg dh dg</div>
        </div>
        <div class="box__item">3
          <div class="box__content">as das asdgasd fsadf asd asfasd asdf asda agaga asd</div>
        </div>
        <div class="box__item">4</div>
        <div class="box__item">5</div>
        <div class="box__item">6</div>
      </div>
      <div class="list__sidebar">sidebar</div>
    </div>
    <div class="list__row">row</div>
  </div>
</div>

    • 1

相关问题