CSS使用flex弹性盒子保持容器平均分

简介: CSS使用flex弹性盒子保持容器平均分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>flex 布局</title>
  <style> 
    *{
      padding:0;
      margin:0;
    }
    body,html{
      height: 100vh;
      min-width: 800px;
    } 
    .container{
      display:flex;
      flex-wrap:wrap;
    }
    .container>.item{
      border: 1px solid black;
      flex:1; 
      height:100px;
      background: #abcdef;
    }
  </style>
</head>
<body>
  <div class="container">  
    <div class="item"></div>
    <main class="item"></main>
    <div class="item"></div>
  </div>
</body>
</html>

相关文章
|
27天前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
16 0
|
4月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
2天前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
1月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 容器
CSS Flex 弹性盒模型
当元素设置了display: flex样式时,表示当前元素开启了flex布局,这个元素成为一个 flex 容器(flex container)。这个元素不会脱离文档流,元素中的内容沿着两个轴的方向进行布局。 开启了flex布局的元素就是一个伸缩容器(flex 容器),伸缩容器中所有的子元素就是伸缩项目。
|
1月前
|
Web App开发 前端开发 JavaScript
CSS容器查询获得主流浏览器支持,是什么?怎么用?
CSS容器查询获得主流浏览器支持,是什么?怎么用?
|
1月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影

相关产品

  • 云迁移中心