html弹性盒模型,详解css3弹性盒模型（Flexbox）OMG, I’m centered

59 阅读 0 评论 39 点赞

我是靠谱客的博主生动便当，最近开发中收集的这篇文章主要介绍html弹性盒模型,详解css3弹性盒模型（Flexbox）OMG, I’m centered，觉得挺不错的，现在分享给大家，希望可以做个参考。

赞助我以写出更好的文章，give me a cup of coffee?

今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。

Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。

Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

bVc8a8

创建Flex容器

flexbox布局首先需要创建一个flex容器。为此给元素设置display属性的值为flex。对于IE10来说，我们需要在开头的地方添加-ms-flexbox。

.container{

display:-webkit-flex;

display:-moz-flex;

display:flex;

display:-ms-flexbox;

}

水平或垂直分布

box-orient定义分布的坐标轴：vertical和horizional。这两个值分别定义盒子垂直显示和水平显示：

.container{

display: box;

box-orient: horizontal;

}

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。