CSS布局

一、布局是什么

把页面分成一块一块，按左中右、上中下等排列。

二、布局分类

• 固定宽度布局，一般宽度为 960 / 1000 / 1024 px
• 不固定宽度布局，主要靠文档流原理布局
• 响应式布局，PC 上固定宽度，手机上不固定宽度

三、布局需要用到的方法

• float布局
• flex布局
• grid布局

四、float布局

步骤

1. 在子元素上加 float: left 和 width
2. 在父元素上加 .clearfix

// css
clearfix::after{
    content: '';
    display: block;
    clear: both;
}

经验

1. 一般有经验的人会留一部分空间或者最后一个不设 width
2. 不需要做响应式，因为手机上没有 IE ，这个布局时专门为 IE 准备的
3. IE 6/7 存在双倍margin bug，解决办法：

• 针对 IE 6/7 把 margin 减半

// css
margin-left = 10px;
_margin-left = 5px; // 针对 IE6/7 加上这一句

• 再写完 margin 后 加上一句 display: inline-block

例子 代码

五、flex布局

概念

container 与 items

样式

- container

让一个元素变成 flex 容器

// css 
.container {
    display: flex; /* or inline-flex */
}

改变 items 流动方向（主轴）

// css
.container {
    flex-direnction: row // 默认 | row-reverse | colum | colum-reverse
}

改变折行

// css
.container {
    flex-warp: nowrap // 默认 | wrap | wrap-reverse  
}

主轴对齐方式
默认主轴为横轴，除非改变了 flex-direction 方向

// css
.container {
    justify-content: flex-start // 默认 | flex-end | center | spacebetween | space-around | space-evenly 
}

次轴对齐方式
默认次轴为纵轴

// css
.container {
   align-items: stretch // 默认 | flex-start | flex-end | center | baseline
}

多行内容对齐方式

 // css
.container {
   align-content: flex-start // 默认 | flex-end | center | stretch | spacebetween | space-around 
}

- item

控制 item 的顺序

在 item 上面加 order代码

默认 order: 0；

控制 item 长胖

在 item 上面加 flex-grow 代码

默认 flex-grow: 0;, 负值无效。

控制 item 变瘦

在 item 上面加 flex-shrink 代码

默认 flex-shrink: 1; , 防止变瘦可以写flex-shrink: 0;

控制基准宽度

在 item 上面加 flex-basis

默认 flex-basis:auto;

定制 item 自己

在 item 上面加 align-self 定制 align-self 代码

常用的代码

• display: flex
• flex-direction: row / column
• flex-wrap: wrap
• justify-content: center / space-between
• align-items: center

经验

• 永远不要把 width 和 height 写死，除非特殊说明
• 用 min-width / max-width / min-height / max-height
• flex 可以基本满足所有需求
• flex 和 margin-xxx: auto 配合有意外的效果

六、grid布局

功能非常强大，grid 也分 container 和 items

成为 container

// css
.container {
    display: grid | inline-grid;
}

行和列

// css
.container {
   grid-template-columns: 40px 50px auto 50px 40px;
   grid-template-rows: 25% 100px auto;
}

以上代码可以将 container 分为以下图片布局

还可以给每条线取名字

// css
.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

结果为：

itme

可以设置范围

// css
.item-a { 
  grid-column-start: 2; 
  grid-column-end: five; 
  grid-row-start: row1-start; 
  grid-row-end: 3; 
}

例子：代码

container 可以用 fr 记 fr - free space 巧记：份

// css
.contaner {
    grid-template-columns: 1fr 1fr 1fr; | grid-template-columns: 1fr 1fr 1fr 50px;
    // 1fr 与 50px 可以混写
}

分区 grid-template-areas

例子：代码

间隙 grid-gap

grid 尤其适合不规则布局