美文网首页
css布局--均匀分布的子元素

css布局--均匀分布的子元素

作者: 怪兽别跑biubiubi | 来源:发表于2018-03-23 15:01 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>均匀分布的子元素</title>
  <style>
    .box {
      width: 1000px;
      height: 100px;
      background: #eee;
      display: flex;
      /* justify-content: space-between;     水平均匀分布子元素。第一个项目位于左边缘,而最后一个项目位于右边缘。 */
      /* justify-content: space-around;   给子元素们分配空间,而不是在他们之间。 */
    }
  </style>
</head>
<body>
  <div class="box">
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </div>
</body>
</html>

相关文章

  • css布局--均匀分布的子元素

  • CSS的布局与居中

    css的布局 css左右布局 双浮动|左右布局: 双浮动: 在子元素下面添加float,在父元素上面加上clear...

  • 前端备记

    css 1.布局的三种方式:普通布局,流布局,相对布局。 2.块元素,行内元素,display的使用 3.子元素在...

  • 关于Flex的使用

    基本概念 css3 中Flex意为‘弹性布局’,采用css3 Flex布局的元素,称为Flex容器,它的所有子元素...

  • 块状元素和内联元素、盒子模型

    div+css布局 表格布局 table布局 div+css布局 浮动布局 块状元素和行内元素 display:...

  • CSS flex布局学习笔记

    CSS flex布局学习笔记 flex简介 flex用于为容器内的子元素设置布局。当一个元素的display属性设...

  • 自适应技巧(一)

    布局: css: 技巧:父元素100%;子元素左侧固定宽并且:float:left;右侧margin-left的值...

  • grid简单的布局

    第一个 Grid 布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素...

  • 初识grid网格布局

    一个简单的Grid布局 CSS Grid 布局由两个核心组成部分:父元素(wrapper)和子元素(item)。w...

  • css的布局

    1.css实线左右布局 使用float,在子元素中分别加入float,使其子元素脱离父元素的文档流,left是向左...

网友评论

      本文标题:css布局--均匀分布的子元素

      本文链接:https://www.haomeiwen.com/subject/tblxcftx.html