~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: CSS
作者:公孙离
撰写时间:2021/6/8
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
布局的传统解决方案,基于盒状模型,依赖 display 属性 +position属性+float属性。
它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了
一种新的方案----Flex 布局,可以简便、完整、响应式的实现各种页面布局。目前。它已
经得到了所有浏览器的支持,这意味着,现在就能黑安全的使用这项功能。
一、Flex布局是什么?
Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局:
.box{
display: inline-flex;
}
Webkit 内核的浏览器,必须加上-webkit 前缀:
.box{
display: -webkit-flex; /*Safan*/
display: flex;
}
浮动:float 清除浮动:clear 垂直对齐:vertical-align
*设置了 Flex 布局之后,子元素的 float、clear 和 vertical-align 失效;
二、基本概念
采用 Flex 布局的元素,称为 Flex 容器 (flex container),简称“容器”。它的所有子元素
自动成为容器成员,称为 Flex 项目 (flex item),简称“项目”。
容器默认存在两根轴:水平主轴(main axis)和 垂直的交叉轴。主轴的开始位置(与边框的交叉点)
叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫 cross start,结束位置叫 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴的空间叫做 cross size。
三、容器的属性:
以下6个属性设置在容器上:
flex-diretion:主轴的方向 (即项目的排列方向);
flex-wrap:如果项目在一条轴线排不下,如何换行;
flex-flow:flex-diretion 和 flex-wrap 的简写;
justify-content:项目在主轴上的对齐方式;
align-itens:项目在交叉轴上的对齐;
align-content:多根轴线的对齐方式。
flex-diretion 属性:
Flex-ditrtion 属性决定主轴的方向(即项目的排列方向)。
该属性可能取值以及对应的效果如下:
flex-diretion: row;( 默认,主轴为水平方向,起点在左端。)
起点左端: 1 2 3
flex-diretion: row-reverse;( 主轴为水平方向,起点在右端。)
起点右端: 3 2 1
flex-direction: column; ( 主轴为垂直方向,起点在上沿;)
起点上沿: 1
2
3
flex-direction: colum-reverse; ( 主轴为垂直方向,起点在下沿;)
起点下沿: 3
2
1
flex-wrap 属性:
默认情况下,项目都排在一条线 (又称“轴线”)上。flex-wrap 属性定义,如果一条轴线排不下,
如何换行。
该属性可能取值以及对应的效果如下:
flex-wrap: nowrap; ( 默认,不换行 )
1 2 3 4 5 6 7 8 9 10 11 12
flex-wrap: warp; ( 换行,第一行在上方 )
1 2 3 4 5 6 7 8 9
10 11 12
flex-wrap: wrap-reverse; ( 换行,第一行在下方 )
10 11 12
1 2 3 4 5 6 7 8 9
flex-flows 属性:
flex-flow 是 flex-direction 和 flex-wrap 属性的简写,默认值是 row nowrap。
justify-content 属性:
Justify-content 属性定义了项目在主轴上的对齐方式。
该属性可能取值以及对应的效果如下: