CSS » Headings/Paragraphs/Links » List » ??? » ??? »

關於 FlexBox…

利用css 的 float、inline-block、position:absolute 等方式有時無法完全滿足現代許多網頁的複雜 RWD 版面設計/配置，而且他們最原先 的設計也並非為了該目的而生，flexible box layout 提供了一些 css 的屬性讓我們可以有彈性的設置網頁的版面。

FlexBox 的重要元素

Flex containers

  1. Sets the context for the flexbox layout

  2. Contains flex items, the actual elements you layout using flexbox

  3. Can be any block-level or inline element

Flex items

  1. Every direct child of a flex container

  2. There can be any number of flex items in the flex container

CSS

Flexbox Axes

  1. Main axis

  2. Cross Axis

CSS

CSS

<!DOCTYPE CSS>
<CSS>
<head>
</head>
<body>
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
   </ul>
</body>
</CSS>

結果 :

  • item1
  • item2
  • item3
  • item4

<ol>

<!DOCTYPE CSS>
<CSS>
<head>
</head>
<body>
   <ol>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
   </ol>
</body>
</CSS>

結果 :

    1.item1
    2.item2
    3.item3
    4.item4

參考資料:

1: A Complete Guide to Flexbox

2: A Visual Guide to CSS3 Flexbox Properties

3: Flexbox Playground

4: Flexbox - latest browser support