相关疑难解决方法(0)

flex-basis和width之间有什么区别?

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

  • 如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么?
  • 如果我将两者设置为不同的值会发生什么?如果它们具有相同的值会发生什么?
  • 是否存在一些特殊情况,使用宽度柔性基础与使用另一个有明显区别?
  • 如何宽度柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长弹性收缩
  • 还有其他重大差异吗?

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集?但我觉得更直接的比较或总结柔性基础宽度(或高度)的差异将是不错的.

css css3 flexbox

196
推荐指数
5
解决办法
6万
查看次数

Flexbox 布局,桌面两列,移动一列

带有 flexbox 问题的简单布局:

桌面布局要求

  • 两个响应列
  • 第一列,宽度的 30%
  • 宽度为 70% 的第二列

移动布局要求

  • 单个响应列
  • 100% 宽度的第一行(这是桌面上的第一列)
  • 宽度为 100% 的第二行(这是桌面上的第二列)

到目前为止我所得到的:

当我切换到mobile(例如通过按钮单击下面的代码片段)模式时,我flex-direction: column在 flex 容器上设置。它似乎工作。

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}
Run Code Online (Sandbox Code Playgroud)

笔记:

这个问题是关于需要更改哪些 CSS flexbox 属性才能从桌面布局转到移动布局。这与如何检测窗口大小或如何设置媒体查询无关。如果我写的方式没有说清楚,我很抱歉。


有没有更清洁的方法来做到这一点?我是否需要设定flex的属性flexItems100%当移动模式还是可以让他们为30%70%,因为他们似乎并不时重要flex-direction设为column

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: …
Run Code Online (Sandbox Code Playgroud)

javascript css flexbox reactjs

8
推荐指数
1
解决办法
6037
查看次数

标签 统计

css ×2

flexbox ×2

css3 ×1

javascript ×1

reactjs ×1