赞助我以写出更好的文章，give me a cup of coffee?
今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。
Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。
Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
创建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;
|
最后
以上就是生动便当最近收集整理的关于html弹性盒模型,详解css3弹性盒模型（Flexbox）OMG, I’m centered的全部内容，更多相关html弹性盒模型,详解css3弹性盒模型（Flexbox）OMG,内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复