Flex 專案屬性 flex 布局示例

flex屬性：

flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

該屬性有兩個快捷值：auto(1 1 auto) 和 none (0 0 auto)。

下面來看看使用專案屬性flex的兩個示例：

一、

css：

1

1

<
body
>
2<
div 
id="header"
>頁首
div>
3<
div 
id="content"
>
4<
div>左側固定
div>
5<
div>
6             右側自適應<
br />
7             左側css屬性：flex: 0 0 auto;<
br />
8右側css屬性：flex: 1;
9div
>
10div
>
11<
div 
id="footer"
>頁尾
div>
12body
>

二、css：

1

1

<
body
>
2<
div 
id="header"
>頭部
div>
3<
div 
class
="content"
>
4<
div>左側固定
div>
5<
div>
6         中間自適應<
br>
7         左側：flex: 0 0 auto;<
br>
8         中間：flex: 1 0 auto;<
br>
9         右側：flex: 0 0 auto;<
br>
10div
>
11<
div>右側固定
div>
12div
>
13<
div 
id="footer"
>底部
div>
14body
>

**可以直接複製到html頁面執行，如果有不懂的地方請回顧flex布局屬性：

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

flex布局的屬性

flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...

Flex 布局 容器屬性

flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...