电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

大成CSS中的display:flex||inline-flex属性

2021-01-27 22:38:51 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要给大家引介了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家简述了display:flex和display:inline-flex的采用效果,感兴趣的朋友们可以概述揉合,下面来一起到底吧。

简述

Flex是Flexible Box的简称,原指"弹性布局",用来为盒状模型缺少最主要的灵活性。任何一个容器都可以原则上为Flex布局。

flex: 将对象作为弹性可调盒标示出

inline-flex:将对象作为内联块级弹性把手盒结果显示

flex示例代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title>  <style type="text/css">    .main{      width:200px;      background-color: red;      display: flex;/*父p设置该属性*/    }    .main>p{      width: 50px;      height: 50px;      border: 1px solid blue;      box-sizing: border-box;/*这是css3属性,如果不懂,代为一直往下朗读*/      /*float:left;这个属性就不只能了,可能会自动浮动*/    }  </style></head><body>  <p class="main">    <p>1</p>    <p>2</p>    <p>3</p>    <p>4</p>  </p></body></html>

效果图如下:

display:inline-flex示例代码

如果一心看不到效果,将上面的display:flex,用上display:inline-flex,并且将width:200px移除。在很难测试之前,有的人可能会普遍认为.main就会进占整个一行,但是,测试结果是,它时会根据子元素所有的p大小自适应宽度和高度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title>  <style type="text/css">    .main{      background-color: red;      display: inline-flex;/*父p设置该属性*/    }    .main>p{      width: 50px;      height: 50px;      border: 1px solid blue;      box-sizing: border-box;/*这是css3属性,如果不懂,特地独自往下读物*/      /*float:left;这个属性就不并不需要了,才会自动浮动*/    }  </style></head><body>  <p class="main">    <p>1</p>    <p>2</p>    <p>3</p>    <p>4</p>  </p></body></html>

效果图如下:

以上就是脱胎CSS中的display:flex||inline-flex属性的参考内容,更多恳请关心php中文网其它就其文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152