| 博客记录点滴

html header

head

css 选择器

cssselector

盒子模型

boxmodel

flexbox 布局

flexbox 布局的基本概念

flexbox 布局是一种一维布局模型，可以在一个维度上对元素进行布局，这个维度可以是水平的，也可以是垂直的。flexbox 布局的基本概念如下：

flex container：flexbox 布局的容器，可以是任意元素，通过设置 display: flex 或者 display: inline-flex 来指定一个元素为 flex container。
flex item：flexbox 布局的子元素，flex container 的直接子元素。
main axis：flexbox 布局的主轴，flex item 在主轴上排列。
main start：flex item 在主轴上的起始位置。
main end：flex item 在主轴上的结束位置。
main size：flex item 在主轴上的尺寸。
cross axis：flexbox 布局的交叉轴，flex item 在交叉轴上排列。
cross start：flex item 在交叉轴上的起始位置。
cross end：flex item 在交叉轴上的结束位置。

flex container 的属性

flex-direction：指定 flex item 在主轴上的排列方向，可以是 row（水平方向，从左到右）或者 row-reverse（水平方向，从右到左）或者 column（垂直方向，从上到下）或者 column-reverse（垂直方向，从下到上）。
flex-wrap：指定 flex item 在主轴上是否换行，可以是 nowrap（不换行）或者 wrap（换行）或者 wrap-reverse（换行，从下到上）。
flex-flow：flex-direction 和 flex-wrap 的简写形式，例如 flex-flow: row wrap。
justify-content：指定 flex item 在主轴上的对齐方式，可以是 flex-start（靠左对齐）或者 flex-end（靠右对齐）或者 center（居中对齐）或者 space-between（两端对齐，中间间隔相等）或者 space-around（每个 flex item 两侧间隔相等）。
align-items：指定 flex item 在交叉轴上的对齐方式，可以是 flex-start（靠上对齐）或者 flex-end（靠下对齐）或者 center（居中对齐）或者 baseline（基线对齐）或者 stretch（拉伸填充）。
align-content：指定 flex item 在交叉轴上的对齐方式，可以是 flex-start（靠上对齐）或者 flex-end（靠下对齐）或者 center（居中对齐）或者 space-between（两端对齐，中间间隔相等）或者 space-around（每个 flex item 两侧间隔相等）或者 stretch（拉伸填充）。

flex item 的属性

order：指定 flex item 的排列顺序，可以是任意整数，值越小，排列越靠前，默认值为 0。
flex-grow：指定 flex item 的放大比例，默认值为 0，即不放大。
flex-shrink：指定 flex item 的缩小比例，默认值为 1，即缩小。
flex-basis：指定 flex item 在主轴上的初始尺寸，默认值为 auto，即由元素本身决定。
flex：flex-grow、flex-shrink 和 flex-basis 的简写形式，例如 flex: 1 1 auto。
align-self：指定 flex item 在交叉轴上的对齐方式，可以是 flex-start（靠上对齐）或者 flex-end（靠下对齐）或者 center（居中对齐）或者 baseline（基线对齐）或者 stretch（拉伸填充），默认值为 auto，即继承父元素的 align-items 属性。

flexbox 布局的实例

下面是一个简单的 flexbox 布局的实例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  }
  .item {
    order: 0;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    flex: 0 1 auto;
    align-self: auto;
  }
</style>

flexbox 布局的浏览器兼容性

flexbox 布局的浏览器兼容性如下：

IE 10+（需要添加 -ms- 前缀）
Firefox 22+
Chrome 21+
Safari 6.1+
Opera 12.1+
iOS Safari 7.1+

flexbox

在线生成

flexbox playground and code generatoropen in new window

grid 布局

grid 布局的基本概念

grid 布局是一种二维布局模型，可以在两个维度上对元素进行布局，这两个维度可以是水平的，也可以是垂直的。grid 布局的基本概念如下：

grid container：grid 布局的容器，可以是任意元素，通过设置 display: grid 或者 display: inline-grid 来指定一个元素为 grid container。
grid item：grid 布局的子元素，grid container 的直接子元素。
grid line：grid 布局的线，可以是水平的，也可以是垂直的。
grid track：grid 布局的轨道，可以是水平的，也可以是垂直的。
grid cell：grid 布局的单元格，可以是水平的，也可以是垂直的。
grid area：grid 布局的区域，可以是水平的，也可以是垂直的。
grid gap：grid 布局的间隙，可以是水平的，也可以是垂直的。

grid container 的属性

grid-template-columns：指定 grid container 的列数和列宽，可以是任意长度值，例如 grid-template-columns: 100px 100px 100px。
grid-template-rows：指定 grid container 的行数和行高，可以是任意长度值，例如 grid-template-rows: 100px 100px 100px。
grid-template-areas：指定 grid container 的区域，可以是任意字符串，例如 grid-template-areas: "a a a" "b b b" "c c c"。
grid-template：grid-template-columns、grid-template-rows 和 grid-template-areas 的简写形式，例如 grid-template: 100px 100px 100px / 100px 100px 100px。
grid-column-gap：指定 grid container 的列间隙，可以是任意长度值，例如 grid-column-gap: 10px。
grid-row-gap：指定 grid container 的行间隙，可以是任意长度值，例如 grid-row-gap: 10px。
grid-gap：grid-column-gap 和 grid-row-gap 的简写形式，例如 grid-gap: 10px。
justify-items：指定 grid item 在单元格中的对齐方式，可以是 start（靠左对齐）或者 end（靠右对齐）或者 center（居中对齐）或者 stretch（拉伸填充），默认值为 stretch。
align-items：指定 grid item 在单元格中的对齐方式，可以是 start（靠上对齐）或者 end（靠下对齐）或者 center（居中对齐）或者 stretch（拉伸填充），默认值为 stretch。
justify-content：指定 grid item 在单元格中的对齐方式，可以是 start（靠左对齐）或者 end（靠右对齐）或者 center（居中对齐）或者 stretch（拉伸填充）或者 space-around（每个 grid item 两侧间隔相等）或者 space-between（两端对齐，中间间隔相等）或者 space-evenly（每个 grid item 间隔相等），默认值为 stretch。
align-content：指定 grid item 在单元格中的对齐方式，可以是 start（靠上对齐）或者 end（靠下对齐）或者 center（居中对齐）或者 stretch（拉伸填充）或者 space-around（每个 grid item 两侧间隔相等）或者 space-between（两端对齐，中间间隔相等）或者 space-evenly（每个 grid item 间隔相等），默认值为 stretch。

grid item 的属性

grid-column-start：指定 grid item 的起始列，可以是任意整数，例如 grid-column-start: 1。
grid-column-end：指定 grid item 的结束列，可以是任意整数，例如 grid-column-end: 3。
grid-column：grid-column-start 和 grid-column-end 的简写形式，例如 grid-column: 1 / 3。
grid-row-start：指定 grid item 的起始行，可以是任意整数，例如 grid-row-start: 1。
grid-row-end：指定 grid item 的结束行，可以是任意整数，例如 grid-row-end: 3。
grid-row：grid-row-start 和 grid-row-end 的简写形式，例如 grid-row: 1 / 3。
grid-area：grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式，例如 grid-area: 1 / 1 / 3 / 3。
justify-self：指定 grid item 在单元格中的对齐方式，可以是 start（靠左对齐）或者 end（靠右对齐）或者 center（居中对齐）或者 stretch（拉伸填充），默认值为 stretch。
align-self：指定 grid item 在单元格中的对齐方式，可以是 start（靠上对齐）或者 end（靠下对齐）或者 center（居中对齐）或者 stretch（拉伸填充），默认值为 stretch。

grid 布局的实例

下面是一个简单的 grid 布局的实例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a a a' 'b b b' 'c c c';
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
  }
  .item {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    grid-column: auto / auto;
    grid-row: auto / auto;
    grid-area: auto / auto / auto / auto;
    justify-self: stretch;
    align-self: stretch;
  }

  .item:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }

  .item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }

  .item:nth-child(3) {
    grid-area: 1 / 3 / 2 / 4;
  }

  .item:nth-child(4) {
    grid-area: 2 / 1 / 3 / 2;
  }

  .item:nth-child(5) {
    grid-area: 2 / 2 / 3 / 3;
  }
</style>

grid 布局的浏览器兼容性

grid 布局的浏览器兼容性如下：

IE 10+（需要添加 -ms- 前缀）
Firefox 28+
Chrome 29+
Safari 6.1+
Opera 17+
iOS Safari 7.1+

grid

在线生成

Layoutit Grid: Interactive CSS Grid Generatoropen in new window

css 变换

tranform

# html header

# css 选择器

# 盒子模型

# flexbox 布局

# flexbox 布局的基本概念

# flex container 的属性

# flex item 的属性

# flexbox 布局的实例

# flexbox 布局的浏览器兼容性

# 在线生成

# grid 布局

# grid 布局的基本概念

# grid container 的属性

# grid item 的属性

# grid 布局的实例

# grid 布局的浏览器兼容性

# 在线生成

# css 变换

# sass

html header

css 选择器

盒子模型

flexbox 布局

flexbox 布局的基本概念

flex container 的属性

flex item 的属性

flexbox 布局的实例

flexbox 布局的浏览器兼容性

在线生成

grid 布局

grid 布局的基本概念

grid container 的属性

grid item 的属性

grid 布局的实例

grid 布局的浏览器兼容性

在线生成

css 变换

sass