flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。
彈性盒子包括兩部分: flex容器和flex元素
flexbox的兩根軸線：
主軸和交叉軸
方向其實位置和終止位置
初始效果:
主軸水平從左向右。元素排列為一行 (flex-direction 屬性的初始值是 row)。
元素從左邊起始線開始(justify-content:flex-start)。元素從主軸的起始線開始。
預設不拉伸(flex-grow:0)，但是會壓縮(flex-shrink:1)不換行(flew-wrap:nowrap)。元素不會在主維度方向拉伸，但是可以縮小。
不設定高度時flex元素充滿flex容器(align-items:stretch)。元素被拉伸來填充交叉軸大小。
row // (預設)預設方向
row-reverse//預設方向 首尾互換
column //垂直，從上到下
column-reverse //垂直 從下到上
nowrap //單行
wrap//多行
wrap-reverse // 新線上前排列
4、justify-content 專案在主軸上的對齊方式，屬性值詳解如下：
flex-start //(預設) 主軸起始端(main-start)齊平
flex-end // 主軸末端(main-end)齊平
center//居中
space-between // 兩端對齊，沒兩個flex元素之間的空隙相等
space-around // 每個專案兩側的距離相等
flex-start // 交叉軸起始段(cross-start)齊平
flex-end // 交叉軸末端(cross-end)齊平
center// 居中對齊
baseline //flex元素的第一行文字為基準對齊
stretch //flex元素未設定高度時，高度充滿flex容器高度
flex-start//所有flex子元素交叉軸起始段(cross-start)齊平
flex-end //所有flex子元素交叉軸末端(cross-end)齊平
center //所有flex子元素居中對齊
stretch //未設定高度時佔滿整個交叉軸。預設值
space-between //交叉軸(cross)兩端對齊
space-around //每跟軸兩側空隙相等
2、flex-grow: number; //拉伸比例，預設值為0
4、flex: flex-grow flex-shrink flex-basis //預設值 0 1 auto
5、align-self單個專案在cross軸上的對齊方式，屬性值詳解如下：
flex-start //cross-start齊平
flex-end //cross-end齊平
center //居中
baseline //第一行文字
stretch //為設定高度時 該元素高度為flex容器高度
6、order：number; //該專案排列的位置 值從小到大排列
<
html
lang
="zh"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>彈性盒子
title
>
head
>
<
style
>
.contain
.item
.item
:first-child
.item
:nth-child(2
).item
:last-child
style
>
<
body
>
<
divclass
="contain"
>
<
divclass
="item"
>壹
div>
<
divclass
="item"
>貳
div>
<
divclass
="item"
>叄
div>
div>
body
>
html
>
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...
CSS3 flex 彈性布局
為盒子模型提供最大的靈活性 基本概念 設定了 flex 布局的元素稱為 flex container 容器 所有子元素稱為 flex ite 專案 容器屬性 flex wrap 換行 預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行 flex flow 是 flex d...
CSS3 flex彈性布局之flex屬性
flex 大致分為兩類屬性 容器屬性和專案屬性 容器內部專案的屬性 flex 屬性 flex 1 如就給容器內部專案設定的屬性。這裡的 wrap 指容器，item 我們稱作專案。我們還需要知道flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 aut...