ie css flex 垂直居中,css3-由垂直居中学到flex布局

水平且垂直居中

.box{

border: 1px solid red;

height: 100vh;   /* viewpoint height 视点高度*/

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

Flex(Flexible Box，弹性布局)，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

关于flex的兼容

webkit 内核的浏览器(如Safari)和 IE10 及以下的浏览器兼容方法：

.box{

display: -webkit-flex; /* Safari */

display: -ms-flexbox; /*ie 10*/

display: flex;

}

6个属性简介：

flex-direction   容器内项目的排列方向，默认横向排row(从左到右)，可以设置成纵向排column(从上倒下)，

“row-reverse、cloumn-reverse”分别表示从右到左、从下到上。

flex-wrap   容器内项目换行方式默认不换行 nowrap、换行wrap(第一行上方)和wrap-reverse(第一行下方)

flex-flow    以上两个属性的简写方式，默认值为 row nowrap。

justify-content　项目在主轴上的对齐方式 右对齐 flex-end， 居中 center，两端对齐 space-between，

每个项目两侧的间隔相等 space-around。

align-items　项目在交叉轴上对齐方式 起点对齐 flex-start，终点对齐 flex-end，中点对齐 center， 第一行

文字的基线对齐 baseline，默认 stretch (项目未设置高度或设为auto，将占满整个容器的高度)

align-content　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，

上下对齐 space-between，每个项目两侧的间隔相等space-around 。

6个属性例子：

#linghuohezi {

border: 3px solid green;

width: 300px;

height: 300px;

display: flex;

}

(盒子1234各设了100px边长)

①flex-direction   容器内项目的排列方向

1.默认 从左到右 row

flex-direction:row

2.从上到下 column

flex-direction:column

②flex-wrap　容器内项目换行方式

1.默认 不换行 nowrap

flex-wrap:nowrap

2.换行 wrap

#linghuohezi{

flex-wrap:wrap;

}

flex-wrap:wrap

2.反向换行 wrap-reverse

#linghuohezi{

flex-wrap:wrap-reverse;

}

flex-wrap:wrap-reverse

③flex-flow  是flex-derection 和 flex-wrap的简写方式

默认 从左到右 不换行 row nowrap

#linghuohezi{

flex-flow:row nowrap

}

④justify-content  项目在主轴上的对齐方式

(便于观察 父容器边长改为 600px)

1.默认 左对齐 flex-start

#linghuohezi{

#linghuohezi{

justify-content:flex-end

}

justify-content:flex-start

2.右对齐 flex-end

#linghuohezi{

justify-content:flex-end

}

justify-content:flex-end

3.居中 center

#linghuohezi{

justify-content:center

}

justify-content:center

4.两端对齐 space-between

(项目之间的间隔均相等)

#linghuohezi{

justify-content:space-between

}

justify-content:space-between

5.每个项目两侧的间隔均相等 space-around

(项目之间的间隔比项目与边框的间隔大一倍)

#linghuohezi{

justify-content:space-around

}

justify-content:space-around

⑤align-items  项目在交叉轴上的对齐方式

1.默认 上对齐 flex-start

2.下对齐 flex-end

#linghuohezi{

align-items:flex-end

}

align-items:flex-end

3.居中 center

#linghuohezi{

align-items：center

}

align-items:center

4.第一行文字基线对齐 baseline

(设置1234盒子 边长为 50px，100px，200px，400px，字体为 40px，50px，20px，80px)

#linghuohezi{

align-items：baseline

}

align-items:baseline

5.拉伸充满 stretch (1234盒子无高度设置时)

#linghuohezi{

align-items:stretch

}

align-items:stretch

⑥align-content 多行项目在交叉轴上的对齐方式

align-content 只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果)，

默认 充满拉伸 stretch，起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，

上下对齐 space-between，每个项目两侧的间隔相等space-around 。

align-content 多行项目不同值

注意：stretch无高度设置时