Heim > Backend-Entwicklung > PHP-Tutorial > javascript - 关于flex布局的问题

javascript - 关于flex布局的问题

WBOY
Freigeben: 2016-06-06 20:21:53
Original
1715 Leute haben es durchsucht

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Nach dem Login kopieren
Nach dem Login kopieren

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

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

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

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

回复内容:

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Nach dem Login kopieren
Nach dem Login kopieren

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

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

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage