Home > Backend Development > PHP Tutorial > javascript - 关于flex布局的问题

javascript - 关于flex布局的问题

WBOY
Release: 2016-06-06 20:21:53
Original
1704 people have browsed it

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Copy after login
Copy after login

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Copy after login
Copy after login

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

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Copy after login
Copy after login

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

回复内容:

将body元素这样设置:

<code>display:flex;flex-direction:column;
</code>
Copy after login
Copy after login

它有两个子元素:

<code><div style="height:200px;"></div>
<div style="flex:auto" id="flex"></div>
</code>
Copy after login
Copy after login

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

<code><div style="position:absolute;right:0;width:100px;"></div>
<div style="width:100px;"></div>
</code>
Copy after login
Copy after login

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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template