第 29 章 CSS3 弹性伸缩布局[上]_html/css_WEB-ITnose
学习要点:
1.布局简介
2.旧版本
主讲教师:李炎恢
本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。
一.布局简介
CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中,可能还有各种改动,浏览器的兼容性还存在问题。所以,本节课作为初步了解即可。
首先,我们来看下旧版本的浏览器兼容情况:
Flexbox 旧版本兼容情况
属性 | IE | Firefox | Chrome | Opera | Safari |
带前缀 | 无 | 4 ~ 25 | 4 ~ 31 | 15 ~ 18 | 5.17+ |
不带前缀 | 无 | 无 | 无 | 无 | 无 |
以上的数据,我们摘自 CSS3 手册上的。当然,不同的教材和文章的会略有不同。但误差率也就一到两个版本,影响不大。
首先,第一步:先创建一段内容,分成三个区域。
//HTML 部分
<div> <p> 第一段内容... </p> <p> 第二段内容... </p> <p> 第三段内容... </p></div>
//CSS 部分
p { width: 150px; border: 1px solid gray; margin: 5px; padding: 5px;}div { display: -moz-box; display: -webkit-box; display: box;}
通过以上设置,在除了 IE 浏览器外,布局实现了水平分布。那么下面,我们就重点研究一下这些属性的含义。
二.旧版本
如果属性和属性值为:display:box,那么就是 2009 年 7 月份设定的工作草案,属于旧版本。它面向的是一些早期浏览器的弹性布局方案。
首先,我们要将几个需要布局模块的父元素设置一下容器属性 display。
属性值 | 说明 |
box | 将容器盒模型作为块级弹性伸缩盒显示(旧版本) |
inline-box | 将容器盒模型作为内联级弹性伸缩盒显示(旧版本) |
我们知道块级它是占用整行的,类似
//设置弹性,以火狐为例
div { display: -moz-box;}
1.box-orient 属性
box-orient 主要实现盒子内部元素的流动方向。
//设置垂直流动
div { -webkit-box-orient: vertical;}
属性值 | 说明 |
horizontal | 伸缩项目从左到右水平排列 |
vertical | 伸缩项目从上到下垂直排列 |
inline-axis | 伸缩项目沿着内联轴排列显示 |
block-axis | 伸缩项目沿着块轴排练显示 |
2.box-direction
box-direction 属性主要是设置伸缩容器中的流动顺序。
//设置逆序
div { -moz-box-direction: reverse;}
属性值 | 说明 |
normal | 默认值,正常顺序 |
reverse | 逆序 |
3.box-pack
box-pack 属性用于伸缩项目的分布方式。
//分布方式已结束位置靠齐
div { -moz-box-pack: end;}
属性值 | 说明 |
start | 伸缩项目以起始点靠齐 |
end | 伸缩项目以结束点靠齐 |
center | 伸缩项目以中心点靠齐 |
justify | 伸缩项目平局分布,-webkit-支持,-moz-不支持 |
4.box-align
box-align 属性用来处理伸缩容器的额外空间。//居中对齐,清理上下额外空间
div { -moz-box-align: center;}
属性值 | 说明 |
start | 伸缩项目以顶部为基准,清理下部额外空间 |
end | 伸缩项目以底部为基准,清理上部额外空间 |
center | 伸缩项目以中部为基准,平均清理上下部额外空间 |
baseline | 伸缩项目以基线为基准,清理额外的空间 |
stretch | 伸缩项目填充整个容器,默认 |
5.box-flex
box-flex 属性可以使用浮点数分配伸缩项目的比例//设置每个伸缩项目占用的比例
p:nth-child(1) { -moz-box-flex: 1;}p:nth-child(2) { -moz-box-flex: 2.5;}p:nth-child(3) { -moz-box-flex: 1;}
6.box-ordinal-group
box-ordinal-group 属性可以设置伸缩项目的显示位置。
//将第一个位置的元素,跳转到第三个位置
p:nth-child(1) { -moz-box-ordinal-group: 3;}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
