弹性盒子的使用和详解

最新推荐文章于 2024-06-14 09:42:20 发布

努力学习的小蜗牛

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/105620582

版权

CSS3 弹性盒子(Flex Box)

什么是弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

兼容性

弹性盒模型规范是W3C标准化组织于2009年发布的，目前还没有主流浏览器对其进行支持，不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性，用来支持弹性盒模型。
采用Webkit渲染引擎的浏览器主要包括Safari和Chrome浏览器，该引擎支持以-webkit为前缀的私有属性。
Mozilla渲染引擎的浏览器主要包括Firefox浏览器，该引擎支持以-moz为前缀的私有属性。

弹性盒子的使用
关于弹性盒子的使用可以参考网站

https://www.w3cschool.cn/css3/css3-flexbox.html

这里有详细的解释

下面我来介绍其中的一个属性

box-orient属性
1.horizontal：盒子元素从左到右在一条水平线上显示它的子元素。
2.vertail：盒子元素从上到下在一条垂直线上显示它的子元素。
3.inline-axis：盒子元素沿着内联轴显示它的子元素。
4.block-axis：盒子元素沿着块轴显示它的子元素。

我是用设计多栏布局来介绍这个属性
直接上代码

<!DOCTYPE html>
<html>
<head>
</style>
<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:greenyellow;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>
</head>
<body>

<div id="box">  
    <div id="box0"><img src="img/blizzard-default.png" /></div>  
    <div id="sub-box">  
        <div id="box1"><img src="img/Q1Q - 副本.png" /></div>  
        <div id="box2"><img src="img/Tel - 副本.png" /></div>  
        <div id="box3"><img src="img/WeChat - 副本.png" /></div>  
    </div>  
</div> 

</body>
</html>

注意图片的格式最好不要使用PNG容易出现版本的问题

努力学习的小蜗牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子的使用和详解

CSS3 弹性盒子(Flex Box)什么是弹性盒子弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。兼容性弹性盒模型规范是W3C标准化组织...
复制链接

扫一扫