2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。 伸缩布局 = 弹性布局 = flex布局 原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式 弹性盒子分为两块:box布局(老版本) 和flex布局(新版本) Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一。
注意,设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
容器: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器
项目 容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目“
****容器属性(6 个): | ****项目属性(6个) |
---|---|
flex-direction 主轴方向 | order |
flex-wrap 主轴换行方式 | flex-grow |
flex-flow 符合形式 | flex-shrink |
justify-content 主轴对齐方式 | flex-basis |
align-items 交叉轴对齐方式 | flex |
align-content 多根主轴对齐方式 | align-self |
flex基础弹性盒子
语法:display:flex 表示给当前元素添加弹性盒子
案例一:使用flex弹性盒子让那个div里面的内容在一行显示
<style>
.box{
width: 100%;
display: flex;
}
.inner{
border: 1px solid #f00;
background-color: aquamarine;
}
</style>
<div class="box">
<div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
<div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
<div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
<div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
</div>
display:-webkit-box;和float的区别在于 float浮动之后,高度会随着内容变化,高度不定;并且浮动之后,当盒子缩小时,浮动的内容会自动被挤下来 display:box 不需要设置盒子高度,会自动使多个盒子高度保持一致; 并且弹性盒子设置好之后,屏幕缩小不会让内容自动换行,但是还是没有实 线弹性盒子
flex-direction 决定主轴方向(即项目排列方向)
属性值: row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。
案例一:正常布局
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
flex-direction: row-reverse;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 100px;
}
</style>
<div class="box">
<div class='inner'>1此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。</div>
<div class='inner'>2响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整</div>
<div class='inner'>3论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本</div>
</div>
案例二:row-reverse,起点在右端
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 右对齐 */
flex-direction: row-reverse;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
案例三:column 从上往下按行排放
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 从上往下排放 */
flex-direction: column;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
flex-wrap 设置项目换行方式[使用的多]
默认情况下,项目都排在一条线(又称”轴线”)上。 flex-wrap 属性设置如果一条轴线排不下,项目如何换行。
语法:flex-warp:warp nowrap (默认):不换行,都在一行或者一列中显示 wrap:换行,第一行在上方。 wrap-reverse:伸缩项目无法容纳时,自动换行,方向和wrap相反,这个效果和使用float的效果是一样的。
案例一:warp换行显示
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 换行显示 */
flex-wrap: wrap;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 500px;
}
</style>
案例二:warp-reverse
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 换行显示,并且内容会颠倒 */
flex-wrap: wrap-reverse;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 500px;
}
</style>
flex-flow 主轴方向和换行方式的简写
语法:flex-flow:row nowarp 默认值:row nowrap
案例一:向右对齐 并且 换行
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 颠倒显示,并且换行 */
flex-flow: row-reverse wrap ;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 500px;
}
</style>
justify-content 定义项目在主轴上的对齐方式【使用的多】
语法:justify-content:center 属性值: 语法:justify-content:center 属性值: flex-start(默认值):flex-start(默认值): 主轴起点对齐 主轴起点对齐 flex-end:flex-end: 主轴终点对齐 主轴终点对齐 center:center: 居中 居中 space-between:space-between: 两端对齐,项目之间的间隔都相等。 两端对齐,项目之间的间隔都相等。 space-around:space-around: 每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍。 每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍
space-evenly: 可以使每个元素之间和元素距离边距的距离都相等,但是兼容性比较差。
案例一:中间对齐,两侧不固定
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 整体居中对齐 */
justify-content: center;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
案例二:平均分布,两侧没有缝隙
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 两端对齐 */
justify-content: space-between;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
案例三:整行平均分布
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 中间间距一致 */
justify-content: space-around;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
案例四:整个每个盒子之间的间距一致
<style>
.box {
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 间距一致 */
justify-content: space-evenly;
}
.inner {
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
height: 200px;
width: 300px;
}
</style>
<div class="box">
<div class="inner">项目1</div>
<div class="inner">项目2</div>
<div class="inner">项目3</div>
</div>
align-content属性起作用的条件【针对多行主轴】
对父元素设置自由盒属性display:flex;
并且设置排列方式为横向排列flex-direction:row;
(默认值)
设置换行,flex-wrap:wrap;
align-items 项目在交叉轴上对齐方式【针对单个主轴】
语法:align-items:flex-end 属性值: flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为 auto,项目将占满整个容器的高度。
案例一:在交叉轴起点对齐
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 交叉轴的起点对齐 */
align-items: flex-start;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
width: 300px;
}
</style>
案例二:在交叉轴终点对齐
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 交叉轴的终点对齐 */
align-items: flex-end;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
width: 300px;
}
</style>
案例三:交叉轴的中心对齐
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 交叉轴的中心对齐 */
align-items: center;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
width: 300px;
}
</style>
案例四:第一行文字的基线对齐
<style>
.box{
display: flex;
display: -webkit-flex;
border: 1px solid #f00;
/* 交叉轴的基线对齐 */
align-items: baseline;
}
.inner{
background-color: yellowgreen;
border: 1px solid #f00;
margin: 5px;
padding: 5px;
width: 300px;
}
</style>