資訊專欄INFORMATION COLUMN
摘要：具體的屬性說明，請查看網上各大教程。推薦飄零霧雨整理的參考手冊。本文是對于我在使用過程中的碰到的一些問題的記錄，留下來的印象。它的表現為所有子元素的寬度都是它自身內容即的寬度不使用來改變盒模型，且不換行。具體的解釋見上的回答。
具體的屬性說明，請查看網上各大教程。推薦飄零霧雨整理的CSS參考手冊。
本文是對于我在使用flexbox過程中的碰到的一些問題的記錄，留下來的印象。
如下默認的代碼結構，當flex-wrapper這個容器設置為display: flex之后，其子元素flex-item即使未顯式的聲明flex屬性，都會默認為flex元素，使用默認值，值為：0 1 auto（該值在 Chrome 55.0.2883.87 m 通過window.getComputedStyle($0, null)["flex"];取得）。
它的表現為所有子元素的寬度都是它自身內容即content-box的寬度(不使用box-sizing來改變盒模型)，且不換行。
https://jsfiddle.net/lyplba/f...
換行先上一個我們以往簡單的多列布局（注意：只作為實現，不附加其他條件），會自動換行（其實是被撐下去了），而使用flex布局的形式，你會發現，怎么不會自動換行了？即使你把寬度設為100%也于事無補，flex它會自動均分父容器的寬度，結果就如下示例一樣：
float和flex設置的width是一致的，都為25%
https://jsfiddle.net/lyplba/a...
那么，怎么去換行？這時候就是使用flex-wrap的時候了，不單只這個，還涉及到width和flex-basis。這個的話請參考Stackoverflow上的問答。
flex-basis會設置flex元素（不是包裹flex元素的容器，而是該容器內的flex子元素）的寬或者高（取決于flex-direction是row還是column），因此會導致寬度變高度，高度變寬度，確切的情況下才用，不然我個人一般才用width來設置。
通過設置flex-wrap的值為wrap，就可以實現和float一樣的效果了，如下：
https://jsfiddle.net/lyplba/o...
文本省略截取當被截取的內容被flex所包含的時候，會發現文本截取無法正常生效。
具體的解釋見Stackoverflow上的回答。
更深入的了解為什么即使一個flex元素和一個固定寬度的非flex元素并行的時候，flex元素內容一多就會撐開固定寬度的元素，直至占滿，這里有更深入的解釋說明為何會這樣：Flexbox Implied Minimum Size
結構如下：
這塊使用flex布局的結構，會使內部的子元素無法被正常截取
示例結果：
https://jsfiddle.net/lyplba/r...
這個需求特別是在弄用戶卡片的時候特別需要這樣的設置（是我這邊哈~），看如下截圖：
可以看到關注按鈕在右側，flex布局的好處之一就是可以非常方便的處理居中問題，假設現在我們把手機號下的日期去掉，按照常規的做法沒法居中且還要特別設置或者用其他方法來居中(display: table)之類的。
具體的解決方法還是點這里看 StackOverflow 上的(果然是面向 Google 編程~)
概括flex的優勢在于布局方式，任意的上中下、左中右對齊方式、位置調整、自適應那是相當的贊，可以盡可能的減少使用float、position這種不布局方式，使他們回歸本質，就像以前的table，關于flex布局個人還是要需要花時間去實戰了解。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115477.html
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...
摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...
摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...
閱讀 2789·2021-11-24 09:39
閱讀 2548·2021-11-23 09:51
閱讀 1802·2021-11-17 09:33
閱讀 1736·2021-10-22 09:54
閱讀 1870·2021-08-16 11:00
閱讀 3420·2019-08-30 15:53
閱讀 1733·2019-08-30 13:19
閱讀 2901·2019-08-30 12:49
