CSS 布局

布局分类

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

三种布局思路

1，float

---

元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

• 兼容IE9，不响应式不给手机看

如果父元素里只有浮动元素，那它的高度会是0！想要它自适应即包含所有浮动元素，需要清除它的子元素。 一种方法叫做clearfix，即clear一个不浮动的 [::after]，CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素，伪元素。

给父元素加clearfix见下方：

container::after { 
  content: "";
  display: block; 
  clear: both;
}

2，flex

---

flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间，必要时用负margin。

学习flex布局 - 青蛙小游戏

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

改变items流动方向

flex-direction:

row //行正排列，从左到右 row-reverse //行-逆排列，右到左 column //列-正排列 column-reverse //列-逆排列

改变折行

flex-warp:

nowrap，不折行 wra，折行 wrap-reverse ，反折行

改变主轴对齐方式

justify-content:

flex-start flex-end center space-between space-around space-evenly

改变次轴对齐方式

align-items:

flex-start flex-start flex-end center stretch baseline

多行内容

align-content:

flex-start flex-end center stretch space-between space-around

3，grid

---

CSS Grid 网格布局教程 - 阮一峰的网络日志

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了。但目前只兼容最新的浏览器

3.1 grid用法

声明

div {
  display: grid;
  display: inline-grid;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

4.1 项目属性

下面这些属性定义在项目上面。

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}