x="10"
y="10"
width="274"
height="148"
layout="absolute"
title="login">
在第一部分，當你觀察螢幕和**時，沒有什麼明顯的錯誤和不足。但是當你仔細一點觀察時，你會發現這個使用者介面的組合方式的一些缺陷。例如，你可能發現這個登入框總是在應用程式的左上角。但是我們很可能希望通過調整螢幕使它在程式的中間。
這個登入框還被特定地設定成去適應文字框控制項的大小。這裡並沒有文字框控制項的寬度資訊，所以它們的寬度是預設的150畫素。如果我需要向登入框中新增另外乙個域並且前面的標籤比現有的「username」和「password」標籤長，將會發生什麼？
這可能會迫使我把文字框向右移動。為了保持對齊，然後我還要重新訪問其它的對話方塊並且讓它們向右移動。所有的這些向右移動意味著這個面板要更寬。如果面板中的內容可以在容器的邊界範圍內自動排列，這會不會變得容易些？
約束（constraints）使我很輕鬆地解決了這些型別的問題。它們還讓我通過flex builder的設計試圖全部都這樣做了（使用約束（constraints））。讓我們重新看一些新增了約束（constraints）的**和螢幕截圖。
width="275"
height="150"
horizontalcenter="0"
verticalcenter="0"
layout="absolute"
title="login">
width="275"
height="150"
layout="absolute"
title="login">
這個螢幕截圖和前面的那個幾乎一樣，除了「login」按鈕現在對齊到了右邊—吆吼！**只改變了很少，而且改變方式很優雅。現在在適當的地方用樣式名取代了原來的約束（constraints）。所有那些討厭的直接繫結在特定控制項上的約束（constraints）現在消失了。實際上它們仍然在那裡並且明顯看到它們仍然在應用，但是它們現在都在外部的css檔案中。那個css檔案才是魔法真正上演的地方，讓我們湊近看一下。
controlbar
label
panel
textinput
.userlabel
.userinput
.passlabel
.passinput
所有這些中最好的部分是css的層疊特性。textinput 塊中的「left」和「right」 約束（constraints）同樣會被被用來定義「top」的類別宣告所繼承。雖然我們剛才只是看了textinput，但是對於label來說這些也一樣。這些特性通過在mxml中向控制項新增「stylename」屬性來實現。
css 選擇器（selector）和類別宣告也可以包含字型，顏色和其他的樣式資訊。
對約束（constraints）使用這種樣式化方式向我提供了一些印象非常深刻的效能。讓我們假設一下因為一些原因，不管什麼樣的原因，我們選擇讓面板在應用程式的左上方。我可以開啟css，把"vertical-center" 和"horizontal-center"替換為"left" 和 "top"值，然後就完成了。乙個更好的例子可能是：假設我們想要重新排列label和textinput控制項的順序。
簡單修改一下css我就能完全改變控制項的排列順序。當我希望「password」出現在「username」前面時，它會像縱向排列一樣簡單，我還可以把label控制項排列在textinput空間的右邊。不用去搜尋修改內聯的屬性，只是簡單的css更改。在flex builder設計檢視中通過雙擊修改標籤來反映它們新的位置，並且其餘的控制項會像你想象的一樣布局！！
css中的flex布局
flex布局為 彈性盒布局 用彈性布局的方式有極大的靈活性，任何元素都可以使用flex布局，不管是行內元素或者是快級元素任何乙個容器都可以作為flex布局。box1 主軸的方向 即子元素的排序方向。橫向 反向橫向 豎向 反向豎向。flex direction row row reverse colu...
使用CSS的flex的感悟
如何使用flex，有很多成熟的教程，但對於我來說 技術小白 有些說太多是沒有用的。這裡就談談小白的感悟，怎麼樣才能用起來flex，實現自適應。我是比較笨的，有些技術方法如果不是自己用一遍並且深刻理解，永遠不會想起去使用的。寫這篇的目的就是想要表達，當你還在一畫素一畫素堆積頁面的時候，殊不知完全可以使...
css 彈性盒子 flex 的使用
前言 這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！css3引入了一種新的布局模型 flex 布局。flex是 flexible box 的縮寫，一般稱之為彈性盒模型。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸...