0°

让子div上下垂直居中

简单的几行,让子div上下垂直居中

来源于:

http://zh.learnlayout.com/flexbox.html

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子,来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行,基于最新的标准

网上有不少过时的 flexbox 资料。 如果你想要了解更多有关 flexbox 的内容,从这里学习如何辨别一份资料是否过时。我已经写了一份关于最新标准的详细文章

使用flexbox你还可以做的更多;这里只是一些让你了解概念的例子:

使用 Flexbox 的简单布局

.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;flex: 1;
}
让子div上下垂直居中

使用 Flexbox 的牛逼布局

.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
让子div上下垂直居中

使用 Flexbox 的居中布局

.vertical-container {
        height: 300px;display: -webkit-flex;
            display:         flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            }
让子div上下垂直居中
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论