HarmonyOS鸿蒙Next中轻量级用CSS怎么实现一侧固定宽度另一侧自适应宽度的布局（或者Y轴方向一个元素高度固定，下方盒子高度自适应）？

HarmonyOS鸿蒙Next中轻量级用CSS怎么实现一侧固定宽度另一侧自适应宽度的布局（或者Y轴方向一个元素高度固定，下方盒子高度自适应）？ 轻量级鸿蒙中用css怎么实现一侧固定宽度另一侧自适应宽度的布局（或者y轴方向一个元素高度固定，下方盒子高度自适应）？？

示意图如下:

cke_1126.png


更多关于HarmonyOS鸿蒙Next中轻量级用CSS怎么实现一侧固定宽度另一侧自适应宽度的布局（或者Y轴方向一个元素高度固定，下方盒子高度自适应）？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

纯CSS做不到，轻量级鸿蒙遵循一个原则，大部分组件，你必须要非常清楚地，明明白白的告诉它，你是多大。

更多关于HarmonyOS鸿蒙Next中轻量级用CSS怎么实现一侧固定宽度另一侧自适应宽度的布局（或者Y轴方向一个元素高度固定，下方盒子高度自适应）？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


那麻烦问一下这个不同尺寸的屏幕自适应怎么完成呢，

你如果单指你现在这个场景，就只能硬算。让固件提供一个返回当前屏幕大小的接口，或者在device.getInfo之类的返回，然后利用style可以动态赋值这个来做适应。如果是整个应用各个地方的自适应，暂时没有。要不就是固件去写转换，要不就是我们应用层针对有限的尺寸去写对应的css，最后打包的时候自己去切换，

在HarmonyOS鸿蒙Next中，使用CSS实现一侧固定宽度另一侧自适应宽度的布局，可以通过Flexbox布局模型来实现。以下是一个简单的示例：

.container {
    display: flex;
}

.fixed-width {
    width: 200px; /* 固定宽度 */
}

.flexible-width {
    flex-grow: 1; /* 自适应宽度 */
}

对应的HTML结构：

<div class="container">
    <div class="fixed-width">固定宽度</div>
    <div class="flexible-width">自适应宽度</div>
</div>

对于Y轴方向一个元素高度固定，下方盒子高度自适应的布局，可以使用Flexbox的flex-direction: column属性：

.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 容器高度为视口高度 */
}

.fixed-height {
    height: 100px; /* 固定高度 */
}

.flexible-height {
    flex-grow: 1; /* 自适应高度 */
}

对应的HTML结构：

<div class="container">
    <div class="fixed-height">固定高度</div>
    <div class="flexible-height">自适应高度</div>
</div>

通过这些CSS属性和HTML结构，可以在HarmonyOS鸿蒙Next中实现一侧固定宽度另一侧自适应宽度，或者一个元素高度固定下方盒子高度自适应的布局。

在HarmonyOS鸿蒙Next中，可以使用CSS的flex布局实现一侧固定宽度另一侧自适应宽度的布局。例如，设置父容器为display: flex;，固定宽度的子元素设置flex: 0 0 200px;（固定200px），自适应宽度的子元素设置flex: 1;。对于Y轴方向，固定高度的元素设置height: 100px;，下方自适应高度的元素设置flex: 1;。

回到顶部