翻譯不完整。請協助 翻譯此英文文件

CSS3 彈性盒子,又稱flexbox,是為了適應不同螢幕尺寸和顯示設備而生的佈局模式針對許多應用而言,不用 floats 的彈性盒子模型會比塊狀模型(block model)易用,flex container 的邊緣也不會與內容的邊緣重疊。

多數設計師會發現 flexbox 用起來比 box 簡單得多。像是不多注意 div 的話,它就會經常違反設計師意願地,跑到頁頂去──也因此,讓 footer 附著在頁底也變得很困難。flexbox 的寬高能改變以適應顯示空間,將較低的元件固定住。Flexbox 邏輯也會讓你確實讓 div 壓在頁面的右方或底部。Flexbox 元素的顯示順序,與原始碼的顯示順序相互獨立。

一些時髦的佈局,也能因而透過更簡潔的程式碼完成。This independence intentionally affects only the visual rendering, leaving speech order and navigation based on a linear reading of the HTML source.

注:儘管 CSS 彈性盒子佈局規範還處於最終徵求意見稿(Last Call Working Draft)階段(參見最新編輯草案)、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了,現在主流的瀏覽器,都對 flexbox 有著良好的支持。請參見相容性表格的具體屬性,以獲取最新的相容狀態。

彈性盒子的概念

Flex 排版的大致定義,是能更改該項目的長與(或)高,以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。

塊狀佈局(Block layout)以垂直方向為準、行內佈局(Inline layout)以水平方向為準、而彈性佈局(Flexbox layout)則同時允許這兩種。塊狀佈局雖適於頁面顯示,但在程式元件(application component)需要在用戶代理(user agent)變更、手機從垂直方向翻轉到水平方向……等變更定位、大小、拉伸、收縮的情形下,這種佈局就很難用了。彈性盒子佈局長於小規模佈局、而剛剛流行的格線佈局(Grid layout)則長於大規模佈局。二者皆為 CSS 工作小組為在不同用戶代理、書寫模式、和其他要求下的 Web 應用程式,提供良好互通性的一部分。

彈性盒子的字彙

在彈性盒子的世界,我們不會稱水平(inline)或垂直(block),而是 main axis 與 cross axis。如果 flex-directioncolumn。main axis 就會充當垂直、而 cross axis 則充當水平。請參考下面的圖,它展示了 row 裡面有 flex-direction 的 flex container,意在為 flex items 會以 main axis 作水平排列。

flex_terms.png

Flex container
包住 Flex item 的父元素。Flex container 是指在 display 屬性用上 flexinline-flex 值。
Flex item

每個 Flex container 的子元素就會變成 Flex item。直接包含在 Flex container 的文字,會被包裝成匿名的 Flex item。

Axes

Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

  • The flex-direction property establishes the main axis.
  • The justify-content property defines how flex items are laid out along the main axis on the current line.
  • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
  • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
Directions

The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

  • The order property assigns elements to ordinal groups and determines which elements appear first.
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
Lines

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

Dimensions

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

設計一個彈性盒子

要設計基於這種風格的 CSS 元素,請把 display 屬性設為:

display: flex;

或:

display: inline-flex;

Doing so defines the element as a flex container and its children as flex items. The flex value makes the flex container a block-level element. The inline-flex value makes the flex container an atomic inline-level element.

Note: When using the vendor prefix tag for old browsers, add the prefix to the display property, not the display attribute itself. For example, display: -webkit-flex.

Flex Item Considerations

Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated display: none.

Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.

The margins of adjacent flex items do not collapse. Using auto margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See Aligning with 'auto' margins in the W3C CSS Flexible Box Layout Module specification for more details.

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the order property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

Flexible Box Properties

Properties not affecting flexible boxes

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:

  • column-* properties of the multiple column module have no effect on a flex item.
  • clear has no effect on a flex item.
  • float causes the display property of the element to compute to block.
  • vertical-align has no effect on the alignment of flex items.

示例

Basic flex example

This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.

​<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
    .flex {
        /* basic styling */
        width: 350px;
        height: 200px;
        border: 1px solid #555;
        font: 14px Arial;

        /* flexbox setup */
        display: flex;
        flex-direction: row;
    }

    .flex > div {
        flex: 1 1 auto;
        width: 30px; /* To make the transition work nicely. (Transitions to/from
                        "width:auto" are buggy in Gecko and Webkit, at least.
                        See http://bugzil.la/731886 for more info.) */
        transition: width 0.7s ease-out;
    }

    /* colors */
    .flex > div:nth-child(1){ background: #009246; }
    .flex > div:nth-child(2){ background: #F1F2F1; }
    .flex > div:nth-child(3){ background: #CE2B37; }

    .flex > div:hover {
        width: 200px;
    }
   
    </style> 
  </head>
  <body>
    <p>Flexbox nuovo</p>
    <div class="flex">
      <div>uno</div>
      <div>due</div>
      <div>tre</div>
    </div>
  </body>
</html>

Holy Grail Layout example

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

HolyGrailLayout.png

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    body {
        font: 24px Helvetica;
        background: #999999;
    }

    #main {
        min-height: 800px;
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: row;
    }
 
    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 1;
    }
  
    #main > aside {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 3;
    }
 
    header, footer {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }
 
    /* Too narrow to support three columns */
    @media all and (max-width: 640px) {
        #main, #page {
            flex-direction: column;
        }

        #main > article, #main > nav, #main > aside {
        /* Return them to document order */
            order: 0;
        }
  
        #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
        }
    }
    </style>
  </head>
  <body>
    <header>header</header>
    <div id='main'>
      <article>article</article>
      <nav>nav</nav>
      <aside>aside</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>

Playground

There are a few flexbox playgrounds available online for experimenting:

要注意的事情

有時候配置 Flex item 的演算法會有點難以理解。因此,在設計 Flexible box 時有一些指引,能讓你避免負面意義上的驚嘆。

Flexible box 通常會盡量貼合 writing mode 的配置,這意味著 main startmain end 會基於 startend 的位置來配置。

cross startcross end 依賴 startbefore 的定義的位置,其依賴 direction 的值

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

瀏覽器相容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (single-line flexbox) 18.0 (18.0)[6]-moz[2]
22.0 (22.0)
21.0-webkit
29.0
11[3] 12.10-webkit[5] 6.1-webkit[1]
Multi-line flexbox 28.0 (28.0) 21.0-webkit
29.0
11[3] 12.10[5]
15 -webkit
6.1-webkit[1]
Feature Firefox Mobile (Gecko) Firefox OS Android IE Phone Opera Mobile Safari Mobile
Basic support (single-line flexbox) 18.0 (18.0)-moz[2]
22.0 (22.0)

1.0-moz[2]
1.1

2.1-webkit[4]
4.4
11 12.10[5]
15-webkit
7-webkit[1]
Multi-line flexbox 28.0 (28.0) 1.3 2.1-webkit[4]
4.4
11 12.10[5]
15-webkit
7-webkit[1]

[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with -webkit. The prefix was removed again in Opera 17 and Opera Mobile 24.

[6] Up to Firefox 29, specifying visibility: collapse on a flex item causes it to be treated as if it were display: none instead of the intended behavior, treating it as if it were visibility: hidden. The suggested workaround is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse. For more information, see bug 783470.

參見

文件標籤與貢獻者

 此頁面的貢獻者: iigmir, 1986slayer
 最近更新: iigmir,