详解CSS中的display:flex

日期:2020-10-30 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

详细介绍

Flex是Flexible Box的缩写,意为"延展性合理布局",用来为盒状实体模型出示最大的灵便性。任何1个器皿都可以以特定为Flex合理布局。

flex: 将目标做为延展性伸缩盒显示信息

inline-flex:将目标做为内联块级延展性伸缩盒显示信息

flex示例编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父div设定该特性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3特性,假如不懂,请再次往下阅读文章*/
      /*float:left;这个特性就不必须了,会全自动波动*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

实际效果图以下:

display:inline-flex示例编码

假如想看到实际效果,将上面的display:flex,换为display:inline-flex,而且将width:200px删掉。在沒有检测以前,有的人将会会觉得.main会占有全部1行,可是,检测結果是,它会依据子元素全部的div尺寸自融入宽度和高宽比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父div设定该特性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3特性,假如不懂,请再次往下阅读文章*/
      /*float:left;这个特性就不必须了,会全自动波动*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

实际效果图以下:

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。

上一篇:css几种处理inline 返回下一篇:没有了