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