学习目标:
掌握Css弹性分布
学习内容:
1、display弹性分布
设置为flex布局后子元素的**flot clear
属性将失效 但是定位position
**依然生效。
容器的属性:flex-direction
:决定主轴的方向(容器内项目的排列方向)
row
水平方向,起点在左侧(默认值为row)
row-revers
水平方向,起点在右侧
colum
垂直方向 ,起点在左侧
colum-reverse
垂直方向 ,起点在右侧
/***display**:
**flex**:容器添加弹性布局后显示为块级标签
**inline-flex**:容器添加弹性布局后显示为行内块级标签
*/
a{
display:flex;
flex-direction:row
}
2.flex-warp
:若一条轴线排不下,如何进行换行
nowrap
(默认)不换行 容器宽度不够时项目会被挤压
warp
换行,并且第一行在最上面
warp-reverse
:换行 并且第一行在容器最下面
3.flex-flow
是flex-direction
和flex-warp
的简写
4.justiy-content
:定义项目在主轴上的对齐方式
flex-start
项目位于主轴起点(左对齐)
flex-end
项目位于主轴终点(右对齐)
center
居中
space-between
两端对齐 项目之间间隔相同距离
space-around
项目之间间隔相同 但是项目两侧间隔是项目之间的一半
space-evenly
项目边框与项目的距离都相同,均分间隔
a{
flex-flow:row nowrap;
justify-content:center;
}
5.align-items
:项目在交叉轴上如何对齐:
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中点对齐
baseline
根据基线对齐
stretch
默认值(自动填满高度)
6.align-content:定义多根轴线的对齐方式,如果项目只有一根轴线则该属性是失效
flex-start
项目位于交叉轴起点(上对齐)
flex-end
项目位于交叉终点(下对齐)
center
居中交叉轴的中点
space-between
交叉轴两端对齐 项目之间间隔相等
space-around
交叉轴项目之间间隔相同 但是项目两侧间隔是项目之间的一半
space-evenly
交叉轴项目边框与项目的距离都相同
strech
轴线占满整个交叉轴
2、弹性布局元素
1.order
定义项目的排列顺序 值越小在越前面
2.flex-gorw
定义项目的放大比例默认值为0 如果有空余空间也不放大
3.flex-shirink
:定义项目的缩小比例 默认为1 空间不足时才会缩小
4.flex-basis
:定义这个项目在主轴上所占空间
5.flex是flexgrow(0不放大)、flex-shrink(1 会被压缩)、flex-basi上的简写
auto:剩余空间不占用
auto(1 1 auto)
none(0 0 auto)
6**.aligin-self
**:定义在交叉轴上的对齐方式 会覆盖掉容器上的align-items属性
flex-start
项目位于交叉轴起点(上对齐)
flex-end
项目位于交叉终点(下对齐)
center
居中交叉轴的中点
space-between
交叉轴两端对齐 项目之间间隔相等
space-around
交叉轴项目之间间隔相同 但是项目两侧间隔是项目之间的一半
space-evenly
交叉轴项目边框与项目的距离都相同
strech
轴线占满整个交叉轴
学习时间:
11月26日