非常教程

CSS参考手册

灵活的框布局 | Flexible Box Layout

CSS Flexible Box Layout: Advanced layouts with flexbox

Flexbox的定义是能够更改其项目,宽度和/或高度以最好地填充任何显示设备上的可用空间。柔性容器扩展其项目以填充可用空间或缩小它们以防止溢出。

浮动布局带来的问题

  • 包含困难-如果我们的网站有一些不可预测的内容,那么它就变得很有挑战性,同时也变得单调乏味。
  • 源序依赖-布局依赖于HTML源,因此很难更改布局响应不同站点。
  • 等高列问题-如果我们有2-3列的内容不同,我们需要它们的高度相同,不管内容如何,那就很困难了。
  • 内容对中-要使div的内容在中心垂直和水平地对齐,使用浮标非常麻烦

flexbox是如何解决这些问题的?

  • 使flex项目增长以填充可用空间或缩小以避免溢出。这样就解决了新内容溢出的问题,也使版面符合前者的期望。
  • 它给出了成比例的尺寸。
  • FLEX容器中的FLEX项可以在任意方向布局,因此这解决了我们在不同媒体查询中的内容顺序问题。它使视觉内容顺序独立于HTML标记顺序,从而帮助站点响应主题。

Flexbox特性

CSS Flexible Box Layout: Advanced layouts with flexbox

  • 主轴,主尺寸-挠性容器的主轴是放置挠性物品的主要轴。它在主维度上扩展。
  • 主-开始,主-结束-将挠性物品放置在容器内,从主开始侧开始,向主端一侧移动。
  • 主尺寸,主尺寸特性-弯曲物品的阔度或高度,以主尺寸为准,是该物品的主要尺寸。FlexItem的主尺寸属性是宽度或高度属性,以主维度中的哪个属性为准。
  • 横轴,横切尺寸与主轴垂直的轴称为交叉轴。它在横截面上延伸。
  • 交叉启动,交叉-Flex线上装满物品,并将其放入容器中,从弯曲容器的交叉开始侧开始,然后向交叉端一侧移动。
  • 交叉尺寸,交叉尺寸特性-弯曲物品的阔度或高度,以横截面尺寸为准。交叉大小属性是横截面维度中的宽度或高度。

Flex容器属性

  • flex-direction
  • flex-wrap
  • flex-flow

  • justify-content

  • align-items
  • align-content

Flex项属性

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis

Flexbox Mixins

对于那些想利用当前浏览器的本地支持来解决 flexbox 的人来说, 这是一组 mixin。完整支持表

核对:http://caniuse.com/Flexbox

这将使用:

  • 使用2009'box'语法(FF 和 旧Wekbit)和前缀语法( IE10 ,WebKit浏览器,没有flex包装)

最终标准语法(FF、Safari、Chrome、IE11、Opera)

这项工作的灵感来自:

  • http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

  • http://w3.org/tr/CSS 3-Flexbox/
  • http://the-echoplex.net/flexyboxes/

  • http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx(http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85%29.aspx)

  • http://css-tics.com/use-Flexbox/
  • http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

  • https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes

注意: Mixin目前在浏览器中本地不支持。相反,您将需要使用CSS预处理器来充分利用以下内容。但是,CSS预处理器只是生成有效的CSS,所以下面使用的技术可以用纯CSS代替,如果优选的话。

Flexbox容器

“flex”值会导致元素生成块级Flex容器框。

“inline-flex”值会导致元素生成内联级Flex容器框。

显示:flex | inline-flex http://w3.org/tr/css3-flexbox/#flex-containers

@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

//Using this mixin
%flexbox { @include flexbox; }
@mixin inline-flex {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

%inline-flex { @include inline-flex; }

Flexbox方向

'flex-direction'属性通过设置flex容器主轴的方向来指定Flex容器的放置方式。这决定了flex项目的布局方向。

值:row | row-reverse | column | column-reverse http://w3.org/tr/css3-flexbox/#flex-direction-property

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

// Shorter version:
@mixin flex-dir($args...) { @include flex-direction($args...); }

Flexbox包装

“柔性包装”属性控制柔性容器是单线还是多线,以及横轴的方向决定了新线的堆叠方向。

Values: nowrap | wrap | wrap-reverse 默认:无包装

http://w3.org/tr/cs 3-Flexbox/#Flex-Wack-Property

@mixin flex-wrap($value: nowrap) {
  // No Webkit/FF Box fallback.
  -webkit-flex-wrap: $value;
  @if $value == nowrap {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

Flexbox Flow(速记)

'flex-flow'属性是设置'flex-direction'和'flex-wrap'属性的简写,它们共同定义了flex容器的主轴和交叉轴。

值:默认情况:行 无包装

http://w3.org/tr/CSS 3-Flexbox/#Flex-Property

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit/FF Box fallback.
  -webkit-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

Flexbox顺序

“order”属性通过将其分配给序号组来控制弹性项目在其弹性容器内出现的顺序。

默认值:0

http://w3.org/tr/CSS 3-Flexbox/#Order-Property

@mixin order($int: 0) {
  -webkit-box-ordinal-group: $int + 1;
  -moz-box-ordinal-group: $int + 1;
  -webkit-order: $int;
  -ms-flex-order: $int;
  order: $int;
}

Flexbox Grow

“灵活增长”属性设定了灵活的增长因素。负数是无效的。

默认:1

http://w3.org/tr/CSS 3-Flexbox/#FlexGrowth-Property

@mixin flex-grow($int: 1) {
  -webkit-box-flex: $int;
  -moz-box-flex: $int;
  -webkit-flex-grow: $int;
  -ms-flex: $int;
  flex-grow: $int;
}

Flexbox 缩小

“flex-shrink”属性设置了flex收缩因子。负数是无效的。

默认:0

http://w3.org/tr/css3-flexbox/#flex-shrink-property

@mixin flex-shrink($int: 0) {
  -webkit-flex-shrink: 1 $int;
  -moz-flex-shrink: 1 $int;
  -ms-flex: 1 $int;
  flex-shrink: 1 $int;
}

Flexbox Basis

“flex-basis”属性设定了弹性基础。负长度无效。

值:如“宽度”默认值:AUTO

http://www.w3.org/tr/cs 3-Flexbox/#Flex-base-Property

@mixin flex-basis($value: auto) {
  -webkit-flex-basis: $value;
  flex-basis: $value;
}

Flexbox“Flex”(简写)

'flex'属性指定了一个灵活长度的组件; flex增长因子,flex收缩因子和flex基础。当一个元素是一个flex项目时,参考'flex'而不是主尺寸属性来确定元素的主要尺寸。如果一个元素不是一个flex项目,'flex'没有效果。

值:无| ||

默认值:查看单个属性(1 0 auto)。

http://w3.org/tr/CSS 3-Flexbox/#FlexProperty

@mixin flex($fg: 1, $fs: 0, $fb: auto) {

  // Set a variable to be used by box-flex properties
  $fg-boxflex: $fg;

  // Box-Flex only supports a flex-grow value so lets grab the
  // first item in the list and just return that.
  @if type-of($fg) == 'list' {
    $fg-boxflex: nth($fg, 1);
  }

  -webkit-box: $fg-boxflex;
  -moz-box: $fg-boxflex;
  -webkit-flex: $fg $fs $fb;
  -ms-flexbox: $fg $fs $fb;
  flex: $fg $fs $fb;
}

Flexbox对内容进行调整

“justify-content”属性沿flex容器当前行的主轴对齐Flex项目。这是在任何灵活的长度和任何自动边距已经解决之后完成的。通常情况下,当一条线上的所有弹性项目都不灵活,或者是灵活的,但已经达到其最大尺寸时,它有助于分配额外的剩余空间。当它们溢出时,它也对项目的对齐进行控制。

注意:旧格式不支持'space- *'值。

Values: flex-start | flex-end | center | space-between | space-around Default: flex-start

http://w3.org/tr/CSS 3-Flexbox/#Right-内容-属性

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
  } @else if $value == space-around {
    -ms-flex-pack: distribute;
  } @else {
    -webkit-box-pack: $value;
    -moz-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  justify-content: $value;
}
  // Shorter version:
  @mixin flex-just($args...) { @include justify-content($args...); }

Flexbox对齐项目

Flex项目可以在flex容器的当前行的横轴上对齐,类似于“justify-content”,但是在垂直方向上。'align-items'设置所有flex容器项目(包括匿名flex项目)的默认对齐方式。'align-self'允许为各个弹性项目覆盖此默认对齐方式。(对于匿名Flex项目,“align-self”总是与其关联的flex容器上的“align-items”的值相匹配。)

Values: flex-start | flex-end | center | baseline | stretch Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -moz-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  align-items: $value;
}

柔性盒自对齐

Values: auto | flex-start | flex-end | center | baseline | stretch

默认值: auto

@mixin align-self($value: auto) {
  // No Webkit Box Fallback.
  -webkit-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

Flexbox对齐内容

类似于'justify-content'对齐主轴内单个项目的方式,'align-content'属性在flex容器内部对齐flex容器的行。请注意,当flexbox只有一行时,此属性不起作用。

Values: flex-start | flex-end | center | space-between | space-around | stretch

Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property

@mixin align-content($value: stretch) {
  // No Webkit Box Fallback.
  -webkit-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}
CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单