javascript - 关于flex布局的问题

WBOY
Lepaskan: 2016-06-06 20:21:53
asal
1685 orang telah melayarinya

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Salin selepas log masuk
Salin selepas log masuk

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Salin selepas log masuk
Salin selepas log masuk

这样一来,flex元素可以自适应高度。它里面还有两个子元素:

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Salin selepas log masuk
Salin selepas log masuk

如果flex元素的高度为800像素,怎么让这两个元素的高度充满flex元素?

回复内容:

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Salin selepas log masuk
Salin selepas log masuk

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Salin selepas log masuk
Salin selepas log masuk

这样一来,flex元素可以自适应高度。它里面还有两个子元素:

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Salin selepas log masuk
Salin selepas log masuk

如果flex元素的高度为800像素,怎么让这两个元素的高度充满flex元素?

把flex设置成弹性盒子,竖直,这样就可以了

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan