有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.
...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.
我想知道flex-basis与实际宽度的不同之处:
编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集?但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.
带有 flexbox 问题的简单布局:
桌面布局要求
移动布局要求
到目前为止我所得到的:
当我切换到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的属性flexItems来100%当移动模式还是可以让他们为30%和70%,因为他们似乎并不时重要flex-direction设为column?
#flexContainer {
display: flex;
}
#flexItem1 {
background-color: …Run Code Online (Sandbox Code Playgroud)