flex彈性布局0基礎理解 屬性解讀

阮一峰前輩文件參考

概念：一般使用盒模型來布局頁面，但是很麻煩。於是就有了flex，目前所有主流瀏覽器上都可以放心使用。個人的理解為，flex為css的某些用來支援layout頁面布局的屬性。使用起來非常方便。

因為減少了盒模型的繁瑣，相當於頁面布局的替代用法。所以！！父元素設定flex布局後，子元素的子元素的float，vertical-align，clear等屬性都會失效。

任何乙個容器都可以指定為flex布局,它的所有子元素會自動成為容器成員，稱為flex專案。

行內元素也可以使用flex布局哦。

1  flex-direction：row 水平方向，從左向右  | row-reverse 水平方向，從右向左 | column 垂直方向，從上向下 | column-reverse 垂直方向，從下向上;

2  flex-wrap： nowrap 都在一條線上排列不換行【預設】 | wrap 如果一條線上排不下會換行，第一行在上面 | wrap-reverse 如果一條線上排不下會換行，第一行在下面;
3  flex-flow ：
||;     flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

justify-content： flex-start 左對齊 | flex-end 右對齊 | center 居中 | space-between 兩端對齊 | space-around 每個專案兩側的間隔相等 ;   定義子元素在x軸上的對齊方式

5.

align-items： flex-start 上對齊 | flex-end 下對齊 | center 中點對其 | baseline 第一行文字的基線對其 | stretch 預設對對齊方式 ;  定義子元素在y軸上的對齊方式

6.

align-content：flex-start | flex-end | center | space-between | space-around | stretch;  定義多根軸線的對齊方式，如果只有一根軸，該屬性不起作用

1.order：0 ； 定義專案的排列順序。數值越小，排列越靠前 假如有四個專案 ，給四個專案分別設定order屬性，會根據數值大小排序下面4個專案的排列順序：son1 > son3> son4 >son2

.son1 

.son2 
.son3 
.son4 

.son1

.son2

4 flex-basis：auto;  定義了在分配多餘空間之前，專案佔據的主軸空間 ,預設auto，即專案本來大小

5 flex:
01 auto;  是flex-grow, flex-shrink 和 flex-basis的簡寫.
該屬性有兩個快捷值：auto(1
1 auto) 和 none(0
0 auto)。
6 align-self: auto | flex-start | flex-end | center | baseline | stretch; 
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。
預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素或父元素沒有該屬性，則等同於stretch。

<

!doctype html>
"en"
>
"utf-8"
>
flex布局<
/title>
.box 
.son 
img.top 
.son1 
.son2 
.son3 
.son4 
h3 <
/style>
<
/head>
="box"
>
<
!-- 任何乙個容器都可以指定為flex布局,它的所有子元素會自動成為容器成員，稱為flex專案 --
>
="son"
>
<
!-- 注意！！父元素設定flex布局後，子元素的float ,clear,vertical-align屬性都將失效 --
>
這是一幅
/>位於段落中的影象。
<
/div>
="son1"
>
111<
/div>
="son2"
>
22<
/div>
="son3"
>
33<
/div>
="son4"
>
44<
/div>
<
/div>
行內元素也可以使用flex布局哦
<
/h3>
<
/body>
<
/html>

Flex彈性布局基礎屬性

彈性布局可以簡潔 完整 響應式的實現各種頁面布局。螢幕和瀏覽器視窗大小變化也可以靈活調整布局 指定伸縮元素沿著主軸或者側軸，按照一定比例分配額外的空間，調整伸縮元素的大小 指定伸縮元素沿著主軸或者側軸，把伸縮元素額外空間分配到伸縮元素之前 之後和之間 控制元素在頁面上的布局方向 指定如何將垂直於元素...

flex彈性布局基礎

阮一峰的flex布局 flexible box 彈性布局，用來為盒狀模型提供最大的靈活性。採用flex布局的元素成為flex容器，它的所有子元素稱為專案。容器預設兩根軸 水平軸和垂直的交叉軸。整個盒子寬度550px，1,2,3子盒子預設寬高都為100px，然後設定盒子1,2,3的flex grow屬...

Flex布局 彈性布局 基礎入門

flex是flexble box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 他所有子元素自動成為容器成員，簡稱為 flex 專案 flex item 簡稱 專...