常见布局

常见布局

参考网站（http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html）

空间居中布局

空间居中布局指的是，不管容器的大小，项目总是占据中心点

• Grid方式（https://codepen.io/una/pen/YzyYbBx）

  .container {
      display: grid;
      place-items: center;
  }

• Flex方式

  .container {
      display: flex;
      justify-content: center;
      align-items: center;
  }

• 传统方式

  .parent{
    display: table;
  }
  .child{
    display: table-cell;
  }

  .child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /*父元素固定宽高水平垂直居中*/
  .child{
    position: absolute;
    margin: auto;
  }

  /*子元素固定宽高水平垂直居中*/
  .child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(width/2);
    margin-top: -(height/2);
  }

圣杯布局

圣杯布局是最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。这里的实现是，不管页面宽度，内容区始终分成三栏。如果宽度太窄，主栏和右边栏会看不到

• grid方式（https://codepen.io/una/pen/mdVbdBy）
• 传统方式
• Flex方式

三明治布局

三明治布局指的是，页面在垂直方向上，分成三部分：页眉、内容区、页脚。这个布局会根据设备宽度，自动适应，并且不管内容区有多少内容，页脚始终在容器底部（粘性页脚）。也就是说，这个布局总是会占满整个页面高度

• grid方式（https://codepen.io/una/pen/bGVXPWB）
• 传统方式
• Flex方式

两栏式布局

两栏式布局就是一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄

• grid方式（https://codepen.io/una/pen/gOaNeWL）
• 传统方式
• Flex方式

并列式布局

并列式布局就是多个项目并列。如果宽度不够，放不下的项目就自动折行。

• Flex方式（https://codepen.io/una/pen/WNQdBza）

  .parent {
    display: flex;
    flex-wrap: wrap;
  }
  .child {
    //  If we don't want the items to stretch:
    flex: 0 1 300px;
    //  If we do want the items to stretch:
    flex: 1 1 300px;
  }

• 传统方式

• grid方式

双飞翼布局