它的所有子元素自動(dòng)都成為容器成員，被稱(chēng)為flexitem(flexitem)。你說(shuō)的自動(dòng)是什么意思？1.當(dāng)flex的值為none時(shí)，計(jì)算出的值為00auto，下面兩個(gè)表達(dá)式等價(jià)，2.當(dāng)flex的值為auto時(shí)，計(jì)算出的值為11auto，下面兩個(gè)表達(dá)式等價(jià)，3.When flex，值為flexgrow，flexshrink取1，flexbasis取0%，下面兩個(gè)表達(dá)式等價(jià)。4.當(dāng)flex取長(zhǎng)度或百分比時(shí)，就是/123，flexgrow取1，flexshrink取1，以下兩種寫(xiě)法等價(jià)，5.當(dāng)flex取兩個(gè)非負(fù)數(shù)時(shí)，分別為flexgrow和/12344。

我們只會(huì)用到一點(diǎn)點(diǎn)CSS布局屬性，為數(shù)不多，但是既然要用到，就要在這里總結(jié)一下，了解一下。在了解CSS布局的相關(guān)屬性之前，我們先來(lái)了解一下盒子模型。CSS會(huì)把每個(gè)組件當(dāng)作一個(gè)盒子，每個(gè)盒子從里到外有三個(gè)部分:組件的寬度和高度決定了它在屏幕上的顯示大小，組件的寬度和高度是它的外邊框所包圍的矩形的寬度和高度，在iOS中也是一樣。

在RN中，我們要做一個(gè)寬度和高度自適應(yīng)的組件，分兩步。首先，我們要讓組件填充它的父視圖，也就是說(shuō)，如果要適應(yīng)寬度，就要先用它的父視圖的寬度填充子視圖的寬度，如果要適應(yīng)高度，就要先用它的父視圖的寬度和高度填充子視圖。然后我們就可以像在iOS中使用磚石一樣，通過(guò)給組件添加上邊距、左邊距、下邊距、右邊距等約束來(lái)實(shí)現(xiàn)寬度和高度的適配。

/圖像-2//圖像-3/1。當(dāng)flex的值為none時(shí)，計(jì)算值為00auto，以下兩種寫(xiě)法等效。2.當(dāng)flex的值為auto時(shí)，計(jì)算出的值為11auto，以下兩種寫(xiě)法等效。3.值為flexgrow，flexshrink取1，flexbasis取0%，下面兩個(gè)表達(dá)式等價(jià)。4.當(dāng)flex取長(zhǎng)度或百分比時(shí)，就是/123。flexgrow取1，flexshrink取1，以下兩種寫(xiě)法等價(jià)。5.當(dāng)flex取兩個(gè)非負(fù)數(shù)時(shí)，分別為flexgrow和/12344。

自媒體查詢(xún)、rem布局和響應(yīng)式布局是三種不同的技術(shù)。自媒體查詢(xún)常用于適應(yīng)不同的設(shè)備顯示場(chǎng)景，根據(jù)屏幕大小顯示不同的頁(yè)面，但功能基本相同。Rem布局是一個(gè)長(zhǎng)度單位，根據(jù)‘根元素’的字體大小單位(根元素的字體大小為1rem)來(lái)確定。響應(yīng)式布局是當(dāng)頁(yè)面寬度發(fā)生變化時(shí)，整個(gè)頁(yè)面或部分頁(yè)面隨著頁(yè)面縮放而實(shí)時(shí)響應(yīng)變化(響應(yīng)式布局不同于自媒體查詢(xún))。

功能:自媒體查詢(xún)主要是設(shè)置不同設(shè)備屏幕下的顯示風(fēng)格。獲取瀏覽器或設(shè)備的寬度:mindevicewidth \minwidth(注意:也可以獲取高度，即把寬度改寫(xiě)為高度)方法:功能:使用flex對(duì)頁(yè)面進(jìn)行布局，也可以有響應(yīng)。方法:以下方法為flex常用方法，可點(diǎn)擊鏈接flex布局概念:指字體大小相對(duì)于以下元素的單位。

flex設(shè)置為1和auto的區(qū)別在于規(guī)則基準(zhǔn)的使用值不同，子元素不同，包塊不同。1.規(guī)則基準(zhǔn)的使用值不同。1.flex設(shè)置為1:flex設(shè)置為1，規(guī)則基準(zhǔn)的使用值為1px。2.flex設(shè)置為自動(dòng):flex設(shè)置為自動(dòng)的規(guī)則基準(zhǔn)用途值是主尺寸值。二、子元素不同1。flex設(shè)置為1:flex設(shè)置為1，子元素的最大寬度為1px。

Flex layout也叫靈活布局(flexiblebox)模塊，主要是提供一種更有效的方式來(lái)布局容器之間的內(nèi)容。靈活布局的主要思想是使容器根據(jù)需要改變項(xiàng)目的寬度和高度，以填充可用空間，并滿(mǎn)足所有類(lèi)型的顯示設(shè)備和屏幕尺寸。因此，彈性布局模塊的大小是未知的或動(dòng)態(tài)變化的。具有Flex布局的元素稱(chēng)為Flex容器(flexcontainer)，或簡(jiǎn)稱(chēng)為容器。

Flex布局更適合小規(guī)模布局，例如應(yīng)用程序中的組件布局。默認(rèn)情況下，F(xiàn)lex布局容器有兩個(gè)軸:水平主軸和垂直橫軸。主軸起始位置與邊界的交點(diǎn)稱(chēng)為主起點(diǎn)。結(jié)束位置稱(chēng)為mainend；橫軸的起始位置叫crossstart，結(jié)束位置叫cross。默認(rèn)情況下，項(xiàng)目沿主軸排列。

說(shuō)到flex layout，在我之前的影響力里，我只知道這種布局比傳統(tǒng)布局更方便，這種布局對(duì)我來(lái)說(shuō)是全新的。在flex布局出現(xiàn)之前，我們主要使用以下幾種傳統(tǒng)布局:這些傳統(tǒng)布局雖然可以滿(mǎn)足我們的很多需求，但是并不方便，比如垂直居中?，F(xiàn)在，我們將開(kāi)始接觸flex的新布局。flex也可稱(chēng)為“彈性布局”。flex layout有以下特點(diǎn):接下來(lái)總結(jié)一下flex layout的幾個(gè)重要知識(shí)點(diǎn)。

它的所有子元素自動(dòng)都成為容器成員，被稱(chēng)為flexitem(flexitem)。如上圖所示，flex container有垂直和水平兩個(gè)方向的軸，其中橫軸稱(chēng)為主軸，縱軸稱(chēng)為橫軸，主軸的起始位置(與車(chē)架的交點(diǎn))稱(chēng)為mainstart，終止位置稱(chēng)為mainend；橫軸的起始位置叫crossstart，結(jié)束位置叫cross。