zoukankan      html  css  js  c++  java
  • 弹性盒子内容

    弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

    弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

    弹性容器内包含了一个或多个弹性子元素。

    注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

    弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

    以下元素展示了弹性子元素在一行内显示,从左到右:

    <!DOCTYPE html> <html> <head> <style>
    .flex-container { display: -webkit-flex; display: flex; 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; 100px; height: 100px; margin: 10px; }
    </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
  • 相关阅读:
    616无趣
    安装elasticsearch的问题
    导出PDF数据
    生活本苦,奈何年华
    分享一个sql查询重复记录
    springboot的java打印票据-4
    springboot的java打印票据-3
    springboot的java打印票据-2
    react 学习笔记
    原生可拖动表格
  • 原文地址:https://www.cnblogs.com/dengxinxia/p/7141295.html
Copyright © 2011-2022 走看看