简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

CSS弹性盒模型flex在布局中的应用_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:17:11
Original
1257 people have browsed it

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局

前面的话

　　前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用

元素居中

【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

Copy after login 

 
DEMO
Copy after login

【2】在伸缩项目上使用margin:auto

Copy after login 

 
DEMO
Copy after login

两端对齐

Copy after login 

 
DEMO
 
DEMO
 
DEMO
 
DEMO
Copy after login

底端对齐

Copy after login 

 
DEMO
 
DEMO
 
DEMO
 
DEMO
Copy after login

输入框按钮

Copy after login
Copy after login

等分布局

Copy after login 

 
1
 
2
 
3
 
4
Copy after login

多列自适应布局

Copy after login 

 
 
left
 
left
 
 
 
center
 
center
 
 
 
right
 
right
Copy after login

悬挂布局

Copy after login 

 
左侧悬挂
 
主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容
Copy after login

全屏布局

Copy after login 

 
 
top
 
 
 
 
left
 
 
 
 
right
 
 
 
 
 
bottom
Copy after login

Related labels：
CSS弹性盒模型flex在布局中的应用
source：php.cn
Previous article：CSS3实用方法小记 2016.03.16_html/css_WEB-ITnose Next article：css特效_html/css_WEB-ITnose
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
Latest Articles by Author
Latest Issues
Center flex items in a container when surrounded by other flex items I have a flexbox (see code snippet below as an example). I want to set it up so that in al...
From 2023-08-25 14:40:25
0
2
214
My resume title 1. Be proficient in PHP object-oriented programming, strictly follow PSR4 specifications, ...
From 2022-07-20 16:22:34
0
0
613
[Must-read for front-end job hunting] Selected front-end development interview questions and answers_Outline Front-end development interview knowledge points outline: 1. HTML&CSS: Understanding ...
From 2017-11-13 12:02:37
1
3
1246
css - Mobile font will become larger after adding overflow-y:scroll to the box After adding the css attribute: overflow-y:scroll to the outermost box, when viewing it on...
From 2017-05-16 13:39:31
0
5
766
java - 以不同概率的方式发送消息测试服务器的性能问题 对在实际应用中的服务器进行性能测试，对实现不同的功能对应不同的数据包（自定义二进制数据包），在测试中，需要统计出发送不同包的概率模型（在网上查了一下，此概率模型好像满足泊松分布），...
From 2017-04-17 17:52:26
0
1
194
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！