css3弹性布局

二.弹性布局(重点******************************************)

1.什么是弹性布局

弹性布局，是一种布局方式。

主要解决的是某个元素中子元素的布局方式

让页面布局更加的灵活

2.弹性布局专有的名词解释

1.容器

要发生弹性布局的子元素，他们的父元素，成为容器

就是设置display:flex的那个元素

2.项目

要发生弹性布局的子元素们，叫项目

就是设置了display:flex的元素的子元素们

3.主轴

项目们排列方向的一根轴，称之为主轴

如果项目们是按照水平排列，那么主轴就是x轴

如果项目们按照垂直排列，那么主轴就是y轴

项目们在主轴排列的顺序，称为主轴起点和主轴的终点

4.交叉轴

与主轴垂直的一根轴，叫做交叉轴

项目们在交叉轴的排列顺序，称为交叉轴的起点和终点

3.语法

将元素设置为弹性容器之后，他所有的子元素，都会变为弹性项目

display:flex;  将块级元素设置为容器

inline-flex 将行内元素设置为容器

注意：

元素设置为flex容器后，容器的text-align，vertical-align失效

项目float，clear失效

4.容器的属性

①设置主轴的方向

flex-direction

取值  row 默认值，主轴是x轴，主轴起点在左端

row-reverse 主轴是x轴，主轴起点在右端

column     主轴是y轴，主轴起点在顶部

column-reverse 主轴是y轴，主轴起点在底部

②设置项目的换行

flex-wrap:

取值: 默认值  nowrap  空间不够时，不换行，项目会自动缩小

wrap  空间不够时，项目不缩小，换行

wrap-reverse 项目换行，并反转

③上面两个属性的简写

flex-flow:direction wrap;

④定义项目在主轴上的对齐方式

justify-content

取值 1.flex-start 默认值，主轴起点对齐

2.flex-end 主轴终点

3.center   主轴中心

4.space-around 每个外边距相同，两端有空白

5.space-between 两端对齐，两端无空白

5.项目们在交叉轴上的对齐方式

align-items:

取值

1.flex-start 默认值，交叉轴起点对齐

2.flex-end 交叉轴终点对齐

3.center 交叉轴中间对齐

4.baseline 基线，同flex-start类似

5.stretch 项目不写高，充满容器整个高度

5.项目属性

设置在项目中的属性，只会影响当前项目

不影响其他项目

①项目顺序

order 定义项目排列的顺序，值越小。越靠近起点。默认值为0

取值：无单位数字

②flex-grow

如果容器有足够大的剩余空间，项目将按比例放大(比例不准确)

取值，无单位数字   默认值 0

③flex-shrink

如果容器空间不够，项目将按比例缩小(比例不准确)

取值，无单位数字   默认值 1   取值越大，缩小的越快

④align-self

定义某一个项目在交叉轴上的对齐方式，不影响其他项目

取值

1.flex-start交叉轴起点对齐

2.flex-end 交叉轴终点对齐

3.center 交叉轴中间对齐

4.baseline 基线，同flex-start类似

5.stretch 项目不写高，充满容器整个高度

6.auto 使用align-items定义的值

三.css hack

由于不同的浏览器对css的解析认知是不同的，会导致同一份css在不同的浏览器生成的页面效果不同

我们要针对不同的浏览器写不同的css代码

这种写不同css代码的过程，就叫css hack

tmooc有相关的视频

-webkit-

-ms-

-moz-

-o-

四.转换(重点******)

1.什么是转换

改变元素在页面中的位置，大小，角度，形状

2D转换，只在x轴和y轴上发生转换

3D转换，增加了z轴的转换效果

2.转换属性

transform:

取值：1.none 默认值，无任何转换效果

2.转换函数 transform-function

转换函数 transform-function:位移，旋转，放大，倾斜，3D旋转

3.转换原点

transform-origin:

转换原点会影响元素旋转时的效果

取值：1.以px为单位的数字

2.%

3.关键字   left/center/right   top/center/bottom

4.2D转换

①位移

transform:translate();

取值 1.translate(x) 和 translateX(x)

x轴位移  + 往右    - 往左

2.translateY(y)

y轴位移  + 往下    - 往上

3.translate(x,y) 同时设置x轴和y轴的位移

②缩放

③旋转

④倾斜