Css3学习日志 --css层叠样式表display:flex弹性分布

学习目标：

掌握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日

---