bootstrap经典⽹页布局_⼀次性把所有普通和经典的⽹页布局讲得通通透透的，多图预警，。。。
“ ”
超⼲货长⽂预警。这次把⽹页布局⽅案讲得通通透透的，等⾼布局，⽔平垂直居中，经典的圣杯布局等等全都有了。建议收藏
flex布局对齐方式随着Web技术不断的⾰新，CSS近⼏年也变得更强⼤。
在Web开发中，CSS是不可或缺的⼀部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使⽤最适合的CSS属性。
⽽且时⾄今⽇，其中有⼀些CSS的属性可以让开发者能节约更多的时间。⽐如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等⾼布局，⽔平垂直居中，经典的圣杯布局、宽⾼⽐例、页脚保持在底部等。
在本⽂中，我将会介绍⼀些不同的CSS属性来实现这些效果，希望⼤家会感兴趣。更希望对⼤家今后的⼯作有所帮助。
本篇回答内容来⾃于阿⾥巴巴淘系技术部前端技术专家 ⼤漠。
⽔平垂直居中
如何实现⽔平垂直居中 可以说是CSS⾯试题中的经典⾯试题，在多年前这个⾯试题给很多同学都带来了困惑，但 Flexbxo布局模块 和CSS Grid布局模块 的到来，可以说实现⽔平垂直居中已是⾮常的容易。
Flexbox中实现⽔平垂直居中
在Flexbox布局模块中，不管是单⾏还是多⾏，要让它们在容器中⽔平垂直居中都是件易事，⽽且⽅法也有多种。最常见的是在Flex容器上设置对齐⽅式，在Flex项⽬上设置margin:auto。
先来看在Flex容器上设置对齐⽅式。
Flex容器和Flex项⽬上设置对齐⽅式
你可能已经知道在Flex容器上设置justify-content、align-items的值为center时，可以让元素在Flex容器中达到⽔平垂直居中的效果。来看⼀个⽰例：
"flex__container">
"flex__item">
/* CSS */
.flex__container {
display: flex;
justify-content: center;
align-items: center;
}
效果如下：
Demo(codepen.io/airen/embed/YzwYRRy)
这种⽅式特别适应于让Icon图标在容器中⽔平垂直居中，不同的是在Icon图标容器上显⽰设置display: inline-flex。⽐如下⾯这个⽰例："flex__container">
/
* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}
效果如下：
Demo(codepen.io/airen/embed/xxZpQNv)
在这种模式之下，如果要让多个元素实现⽔平垂直居中的效果，那还需要加上flex-direction: column，⽐如：
"flex__container">
"avatar">:)
"media__heading">
"media__content">
"action">
/* CSS */
.flex__container  {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
效果如下：
Demo(codepen.io/airen/embed/QWyazpZ)
在Flexbox布局中，还可以像下⾯这样让Flex项⽬在Flex容器中达到⽔平垂直居中的效果：
"flex__container">
"flex__item">
/* CSS */
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}
.flex__item {
align-self: center;
}
效果如下：
Demo(codepen.io/airen/embed/yLepGKW)
如果在Flex容器中有多个Flex项⽬时，该⽅法同样有效：
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}
.flex__container > * {
align-self: center;
}
⽐如下⾯这个效果：
Demo(codepen.io/airen/embed/bGEaOjm)
除此之外，还可以使⽤place-content: center让Flex项⽬实现⽔平垂直居中：
.flex__container {
display: flex;
place-content: center;
}
.flex__item {
align-self: center;
}
效果如下：
Demo(codepen.io/airen/embed/gOPoZQz)
或者换：
.flex__container {
display: flex;
place-content: center;
place-items: center;
}
效果如下：
Demo(codepen.io/airen/embed/JjGMwzE)
这两种⽅式同样适⽤于Flex容器中有多个Flex项⽬的情景：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。