如何通过flex进行网页布局

flex布局

称为"弹性盒模型"，当父容器设置了display：flex时，子元素自动成为其成员，容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。

flex容器(父容器)的一些属性：

flex-direction：决定主轴的方向（即项目的排列方向）

flex-wrap：如果一条轴线排不下，如何换行

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap

justify-content：定义了项目在主轴上的对齐方式

align-items：定义项目在交叉轴上如何对齐

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

实例

flex实现水平垂直居中

*{

margin:0;

padding:0;

}

html{

width:100%;

height:100%;

}

body{

display:flex;

width:100%;

height:100%;

background:#eee;

justify-content:center;

align-items:center;

}

.box{

width:200px;

height:200px;

background:pink;

}

flex布局

称为"弹性盒模型"，当父容器设置了display：flex时，子元素自动成为其成员，容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。

flex容器(父容器)的一些属性：

flex-direction：决定主轴的方向（即项目的排列方向）

flex-wrap：如果一条轴线排不下，如何换行

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap

justify-content：定义了项目在主轴上的对齐方式

align-items：定义项目在交叉轴上如何对齐

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

实例

flex实现水平垂直居中

*{

margin:0;

padding:0;

}

html{

width:100%;

height:100%;

}

body{

display:flex;

width:100%;

height:100%;

background:#eee;

justify-content:center;

align-items:center;

}

.box{

width:200px;

height:200px;

background:pink;

}