1 1.2 Flexコンテナの要素屬性

alignedが定義されている場(chǎng)合、コンテナプロパティのjustify-contentとalign-itemsで設(shè)定された屬性が上書(shū)きされます

WeChatアプレット開(kāi)発內(nèi)プロジェクトを作成し、新しいファイル レイアウトを作成し、さまざまなファイル (レイアウトに基づいて名前が付けられます) を作成します。

次のコードをlayout.wxmlに追加します:

<view class="container1">
?<view class="item1">
?1
?</view>
<view class="item1">
?2
?</view>
?<view class="item1">
?3
?</view>
?<view class="item1">
?4
?</view>
</view>

次のコードをlayout.wxssに追加します:

.container1{
????height:?100%;
????width:100%;
????background-color:beige;
}
.item1{
????height:100rpx;
????width:100rpx;
????background-color:cyan;
????border:?1px?solid?#fff
}

図 2 に示すようにコンパイルして実行します

注: 上記のコードでは、4 つのサブ要素ビュー (item1) がコンテナー 1 コンテナーに追加されます。各 item1 の幅と高さは、 item1のスタイルファイル: 100rpx。rpxは固定pxとは異なり、各item1の辺が1px、実線(solid)、白(#fff)で??す

図 2

.container1 を次のように変更します: (display: flex; を追加) 図 3 に示すようにコンパイルして実行します。 示されているように、flex レイアウトはデフォルトで要素を水平に配置することがわかります

.container1{
????height:?100%;
????width:100%;
????background-color:beige;
????display:flex;
}

図 3

1.1.1 コンテナ屬性: flex-direction

次のコードを .container1 に追加します。 要素を垂直に配置するようにフレックス レイアウトを設(shè)定します (軸を左から右に橫切る)。 、主軸は上から下に）、図 2 に示すように。 (行: フレックス レイアウトは要素を水平方向に配置します --- 主軸として左から右へ、交差軸として上から下へ)

?flex-direction:column

1.1.2 コンテナ プロパティ: flex-wrap

を追加.container1 內(nèi)の次のコード: 同時(shí)に、layout.wxml 內(nèi)の要素コードを 8 つの要素ビューにコピーし、コンパイルして実行します。その結(jié)果を図 4 に示します。元の高さと幅は 100rpx であることがわかります。正方形のビューが長(zhǎng)方形に変換されました。

flex-wrap:nowrap

図 4 次のコードに変更した場(chǎng)合: 図 5 に示すようにコンパイルして実行します。各サブビューが正方形であることを確認(rèn)し、次のサブビューに収まらない 8 番目のサブビューを配置します。 line

flex-wrap:wrap

図 5

1.1.3容器屬性：?
flex-flow

flex-flow: 行のラップ、コンパイルと実行の結(jié)果: 図 5 に示すように、flex-flow は flex-direction と同等であり、 flex-wrap 屬性の組み合わせ

1.1.4容器屬性：justify-content

次のコードを .container1 に追加します。 図 6 に示すようにコンパイルして実行します。上記コードではflex-flow:wrap row---

を設(shè)定しているため、主軸が左から右にあることと等価なので、1つでは表示できない8番目の要素になります。行は次の行の中央に表示され、最初の 7 行は行の中央に表示され、左右の余白は空白になります

justify-content:center

図 6

justify-content:flex-end?（主軸為左到右情況下：右對(duì)齊）

編譯運(yùn)行效果如圖7所示：

圖7

justify-content:flex-start?（主軸為左到右情況下：左對(duì)齊）不舉例顯示了
justify-content:space-around---效果如圖8所示，每個(gè)子view左右都有留邊

圖8

justify-content:space-between---
效果如圖9所示，每個(gè)子view左右都有留邊，但是首尾兩個(gè)view各自左右對(duì)齊不留邊

圖9

1.1.5容器屬性：align-items

上面已經(jīng)很詳細(xì)講解主軸上的對(duì)齊方式，這里關(guān)于這個(gè)交叉軸上的對(duì)齊方式同理很簡(jiǎn)單，就不詳細(xì)展開(kāi)了。

1.2.1?容器內(nèi)元素屬性：flex-grow

layout.wxml中修改代碼如下：增加i3

?<view class="item1 i3">
?3
?</view>

layout.wxss中修改代碼如下：在item1中增加：? flex-grow: 1，增加i3，表示在一行中如果有剩余空間的話，i3之外的子view占1份空間，而i3子view占2份空間，編譯運(yùn)行效果如圖10所示：可以看出i3view所占據(jù)的空間比其余3個(gè)子view大，但是沒(méi)有到2倍

.item1{
????height:100rpx;
????width:100rpx;
????background-color:cyan;
????border:?1px?solid?#fff;
????flex-grow:?1
}
.i3{
????flex-grow:?2
}

圖10

1.2.2容器內(nèi)元素屬性：flex-shrink

layout.wxml再增加4個(gè)子view

layout.wxss中修改代碼如下：i3的flex-shrink為0，其余子view為1，這表示當(dāng)空間不足時(shí)所有子view都等比縮小，但是i3的view保持大小不變，編譯運(yùn)行，效果如圖11所示

.item1{
????height:100rpx;
????width:100rpx;
????background-color:cyan;
????border:?1px?solid?#fff;
????flex-shrink:?1
}
.i3{
????flex-shrink:?0
}

圖11

1.2.3容器內(nèi)元素屬性：
flex-basis

layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運(yùn)行，效果如圖12所示

.i3{????flex-shrink:?0;????flex-basis:?200rpx
}

圖12

1.2.4容器內(nèi)元素屬性：
flex

flex是grow，shink，basis幾個(gè)屬性的合并，layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運(yùn)行，效果和圖12保持一樣

.i3{????flex:0?0?200rpx}
1.2.5容器內(nèi)元素屬性：order

layout.wxml中修改代碼如下：設(shè)置每個(gè)view的order屬性為其顯示的順序，編譯運(yùn)行

<view class="container1">
?<view class="item1" style="order:4">
?1
?</view>
<view class="item1" style="order:3">
?2
?</view>
?<view class="item1 i3" style="order:2">
?3
?</view>
?<view class="item1" style="order:1">
?4
?</view>
</view>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

微信小程序開(kāi)發(fā)中怎樣實(shí)現(xiàn)地址頁(yè)面三級(jí)聯(lián)動(dòng)

新手怎樣開(kāi)發(fā)第一款微信小程序

以上がWeChat ミニプログラムはどのように配置されるべきですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。