Table of Contents
回复内容:
Home Backend Development PHP Tutorial javascript - 关于flex布局的问题

javascript - 关于flex布局的问题

Jun 06, 2016 pm 08:21 PM
css html html5 javascript php

将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设置成弹性盒子,竖直,这样就可以了

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1253
24
HTML vs. CSS and JavaScript: Comparing Web Technologies HTML vs. CSS and JavaScript: Comparing Web Technologies Apr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

Which 2025 currency exchanges are more secure? Which 2025 currency exchanges are more secure? Apr 20, 2025 pm 06:09 PM

The top ten safe and reliable exchanges in the 2025 cryptocurrency circle include: 1. Binance, 2. OKX, 3. Gate.io (Sesame Open), 4. Coinbase, 5. Kraken, 6. Huobi Global, 7. Gemini, 8. Crypto.com, 9. Bitfinex, 10. KuCoin. These exchanges are rated as safe and reliable based on compliance, technical strength and user feedback.

How to import the source code of wordpress How to import the source code of wordpress Apr 20, 2025 am 11:24 AM

Importing WordPress source code requires the following steps: Create a sub-theme for theme modification. Import the source code and overwrite the files in the sub-topic. Activate the sub-theme to make it effective. Test the changes to make sure everything works.

The Compatibility of IIS and PHP: A Deep Dive The Compatibility of IIS and PHP: A Deep Dive Apr 22, 2025 am 12:01 AM

IIS and PHP are compatible and are implemented through FastCGI. 1.IIS forwards the .php file request to the FastCGI module through the configuration file. 2. The FastCGI module starts the PHP process to process requests to improve performance and stability. 3. In actual applications, you need to pay attention to configuration details, error debugging and performance optimization.

HTML5 and H5: Understanding the Common Usage HTML5 and H5: Understanding the Common Usage Apr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

What happens if session_start() is called multiple times? What happens if session_start() is called multiple times? Apr 25, 2025 am 12:06 AM

Multiple calls to session_start() will result in warning messages and possible data overwrites. 1) PHP will issue a warning, prompting that the session has been started. 2) It may cause unexpected overwriting of session data. 3) Use session_status() to check the session status to avoid repeated calls.

The Connection Between H5 and HTML5: Similarities and Differences The Connection Between H5 and HTML5: Similarities and Differences Apr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

Recommended top 10 for easy access to digital currency trading apps (latest ranking in 25) Recommended top 10 for easy access to digital currency trading apps (latest ranking in 25) Apr 22, 2025 am 07:45 AM

The core advantage of gate.io (global version) is that the interface is minimalist, supports Chinese, and the fiat currency trading process is intuitive; Binance (simplified version) has the highest global trading volume, and the simple version model only retains spot trading; OKX (Hong Kong version) has the simple version of the interface is simple, supports Cantonese/Mandarin, and has a low threshold for derivative trading; Huobi Global Station (Hong Kong version) has the core advantage of being an old exchange, launches a meta-universe trading terminal; KuCoin (Chinese Community Edition) has the core advantage of supporting 800 currencies, and the interface adopts WeChat interaction; Kraken (Hong Kong version) has the core advantage of being an old American exchange, holding a Hong Kong SVF license, and the interface is simple; HashKey Exchange (Hong Kong licensed) has the core advantage of being a well-known licensed exchange in Hong Kong, supporting France

See all articles