CSS 布局1. 布局分类 2. 布局方式 3. float 布局 4. flex 布局 Flex 是 Flexible

1. 布局分类

固定宽度布局，一般宽度为960px/1000px/1024px；
不固定宽度布局，主要靠文档流的原理来布局；
混合布局：PC上固定宽度，收集上不固定宽度

2. 布局方式

float 布局

兼容IE9

flex 布局

不兼容IE9，兼容浏览器全面

grid 布局

不兼容IE9，只兼容最新浏览器

3. float 布局

3.1 步骤

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

<style>   
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.content>aside{
  width: 200px;
  height: 300px;
  float: left;
  background: #999;
}
</style>

 <div class="content clearfix">
    <aside></aside>
  </div>

3.2 float 可以做什么

做两栏布局（如顶部条）
做三栏布局（如内容区）
做四栏布局（如导航）
做平均布局（如产品展示区）

3.3 其他

IE6/7存在双倍margin bug，解决办法有两个

1.针对IE6/7将margin减半
2.加display:inline-block

案例

4. flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

.box{
    display:flex;/* or inline-flex ，常用*/
}

4.1 flex container的属性

flex-direction 改变items的流动方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;/* 常用 */
}

flex-wrap 改变折行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;/* 常用 */
}

flex-flow

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 主轴对齐方式（默认横轴是主轴）

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;/* 常用 */ 
}

align-items 次轴对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;/* 常用 */
}

align-content 多行内容

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

4.2 flex item的属性

order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

flex-grow 控制如何自己长胖

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink 控制自己如何变瘦

一般写flex-shrink:0防止变瘦

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis 控制基准宽度

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self 定制align-items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

4.3 flex 可以做什么

做两栏布局（如顶部条）
做三栏布局（如内容区）
做四栏布局（如导航）
做平均布局（如产品展示区）

4.4 其他

案例
草图软件推荐

Balsamiq
Figma
墨刀

Flex 青蛙游戏

5. grid 布局（二维布局）

grid属性较多，本文只介绍几个常用属性，了解详情可点击A Complete Guide to Grid

5.1 成为container

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

5.2 行和列

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

可以通过以下方式给每条线命名

.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];
}

5.3 item可设置范围

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

5.4 fr(free space)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

5.5 分区 grid-template-areas

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

5.6 空隙 gap

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

5.6 其他

Grid Garden 游戏