L6.Flexbox 伸缩盒模型

http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/

Introduction

CCS2.1中规定了四种布局模式:

  • block layout, designed for laying out documents
  • inline layout, designed for laying out text
  • table layout, designed for laying out 2D data in a tabular format
  • positioned layout, designed for very explicit positioning without much regard for other elements in the document

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,用于复杂的布局(designed for laying out more complex applications and webpages)

例子:

<style>
#deals {
  display: flex;        /* Flex layout so items have equal height  */
  flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}
.sale-item {
  display: flex;        /* Lay out each item using flex layout */
  flex-flow: column;    /* Lay out item’s contents vertically  */
}
.sale-item > img {
  order: -1;            /* Shift image before other content (in visual order) */
  align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
  margin-top: auto;     /* Auto top margin pushes button to bottom */
}
</style>

2、Terminology 术语

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

下图是可以看出flex-flow与之前熟悉的元素的映射关系。The flex-flow value determines how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).

Flexbox 定义了伸缩容器内伸缩项目该如何布局。

Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。

  • 主轴起点 Main Start
  • 主轴终点 Main End
  • 主轴方向 Main Direction (有时候也成为伸缩流方向 Flow Direction)
  • 侧轴起点 Cross Start
  • 侧轴终点 Cross End
  • 侧轴方向 Cross Direction

Flex Containers: the flex and inline-flex display values

display 值有两种

flex :生成一个块级伸缩容器box

inline-flex: 生成一个内联伸缩容器box

Flex 容器与之前的块级元素和内联元素不同,因此很多针对块级元素定义的属性在伸缩容器内是没效果的。(如column-*,float,clear等

Flex Items

4.1 Absolutely-Positioned Flex Children
4.2 Flex Item Margins and Paddings
4.3 Flex Item Z-Ordering
4.4 Collapsed Items 项目折叠

设置伸缩元素的 visibility:collapse ,

目前为止,visibility: collapse; 还没有被让任何浏览器正确的实现。

4.5 Implied Minimum Size of Flex Items

 5 Ordering and Orientation

伸缩容器的内容可以从任何方向任何顺序铺展。主要通过 flex-direction,flex-wrap, and order这三个属性

5.1 flex-direction 伸缩流的方向
  • 默认值是 row:该值表示伸缩项目根据书写模式的方向布局(Flex Flow Direction)
  • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从右往左显示。
  • column: 主轴和侧轴交换。如果书写模式是垂直的(从上到下),那么伸缩项目也是垂直显示的(从上到下)。
  • column-reverse: 和 column 一样,但是方向相反。
5.2 伸缩行换行: the flex-wrap property

nowrap | wrap | wrap-reverse

单行,多行,多行且从cross-end 往cross-start

如果 flex-wrap 设置为 wrap,在一个伸缩行容不下所有伸缩项目时,伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。若为wrap-reverse,则从侧轴反方向添加

5.3 Flex Direction and Wrap: the 
flex-flow shorthand

flex-direction 和flex-wrap 的缩写。

div1 { flex-flow: row; }

/* Initial value. Main-axis is

   inline, no wrap. */

div2 { flex-flow: column wrap; }

/* Main-axis is block-direction (top to bottom)

   and lines wrap in the inline direction (rightwards). */

div3 { flex-flow: row-reverse wrap-reverse; }

/* Main-axis is the opposite of inline direction

   (right to left). New lines wrap upwards. */

NOTE: 以上三个属性都是相对writing-mode而言的。


5.4 显示顺序: order

如果需要文档顺序(html的顺序)和显示顺序不同时,用order,order默认值为0,设为-1将显示在最前面。

6 Flex Lines

  • single-line 即使内容可能溢出也放在一行里
  • multi-line  多行

7 Flexibility

7.1 The flex Shorthand

none | [ <‘flex-grow’><‘flex-shrink’>? || <‘flex-basis’> ]

flex: 0 auto

flex: initial flex: 0 1 auto

元素在有剩余空间的情况下不会有任何变化,但是在必要的情况下会被收缩。

flex: auto =flex: 1 1 auto.

元素会根据主轴自动伸缩以占用所有剩余空间,可以通过使用 flex: 1; 来达到一样的效果

flex: none=flex: 1 1 auto.

在任何情况都不会发生伸缩。

flex: <positive-number> : 指定一个数字,代表了这个伸缩项目该占用的剩余空间比例。剩余空间被所有指定flex的伸缩元素瓜分。

 

7.3 Components of Flexibility

8 Alignment校准

块级元素中的margin在伸缩盒中,能做同样的事情,但是更加强大。

8.1 Aligning with auto margins

margin:auto垂直居中
#login {
  margin-left: auto;
} 导致了所有的剩余空间被合并到login元素的左边去了

 用auto margins 和alignment properties的区别:

  • 左图:margin:auto 右图:(侧轴对齐align-self:center),当这个ul在页面的最左边时,左图是合理的布局。

8.2 Axis Alignment:

the justify-content property主轴对齐(水平方向)

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

8.3 Cross-axis Alignment:

the align-items and align-self properties侧轴对齐(竖直方向)

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

8.4 Packing Flex Lines:  align-content 堆栈伸缩行

与 align-items 相似,不过不是对齐伸缩项目,它对齐的是伸缩行

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

8.5 Flex Baselines

main-axis baseline

cross-axis baseline

9 Flex Layout Algorithm

posted @ 2014-06-16 17:25  果汁果粒  阅读(309)  评论(0编辑  收藏  举报