微信小程序頁面布局方式采用的是Flex布局。Flex布局，是W3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現(xiàn)各種頁面布局。
Flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們可以是動態(tài)的或者不確定的大小的。
Flex布局的主要特征是能夠調整其子元素在不同的屏幕大小中能夠用最適合的方法填充合適的空間。
flex布局
Flex布局的特點:
任意方向的伸縮，向左，向右，向下，向上
在樣式層可以調換和重排順序
主軸和側軸方便配置
子元素的空間拉伸和填充
沿著容器對齊
微信小程序實現(xiàn)了Flex布局,簡單介紹下Flex布局在微信小程序中的使用。
伸縮容器
設有<a href="http://www.miracleart.cn/wiki/927.html" target="_blank">display</a>:flex或者display:block的元素就是一個flex container(伸縮容器)，里面的子元素稱為flex item(伸縮項目)，flex container中子元素都是使用Flex布局排版。
display:block指定為塊內容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認都是dispaly:block。-
display:flex:指定為行內容器模式，在一行內顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
使用display:block(默認值)的代碼:<view class="flex-row" style="display: block;"> <view class="flex-view-item">1</view> <view class="flex-view-item">2</view> <view class="flex-view-item">3</view> </view>顯示效果:
block
改換成display:flex的顯示效果:
flex
可以從效果圖看到block和flex的區(qū)別，子元素view是在換行顯示(block)還是行內顯示(flex)。
主軸和側軸
Flex布局的伸縮容器可以使用任何方向進行布局。
容器默認有兩個軸：主軸(main axis)和側軸(cross axis)。
主軸的開始位置為主軸起點(main start)，主軸的結束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。
同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。詳情見下圖:
Flex-direction
注意，主軸并不是一定是從左到右的，同理側軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個可選值:
row:從左到右的水平方向為主軸row-reverse：從右到左的水平方向為主軸column:從上到下的垂直方向為主軸column-reverse從下到上的垂直方向為主軸
如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。
四種主軸方向設置的效果圖:
示例圖
圖中的實例展示了使用了不同的flex-direction值排列方向的區(qū)別。
實例代碼:
<view >
<view class="flex-row" style="display: flex;flex-direction: row;">
<view class="flex-view-item">1</view>
<view class="flex-view-item">2</view>
<view class="flex-view-item">3</view>
</view>
<view class="flex-column" style="display:flex;flex-direction: column;" >
<view class="flex-view-item">c1</view>
<view class="flex-view-item">c2</view>
<view class="flex-view-item">c3</view>
</view>
</view>運行效果：
flex-direction
對齊方式
子元素有兩種對齊方式：
justify-conent定義子元素在主軸上面的對齊方式align-items定義子元素在側軸上對齊的方式
justify-content有5個可選的對齊方式:
flex-start主軸起點對齊(默認值)flex-end?主軸結束點對齊center在主軸中居中對齊space-between兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等-
space-around每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同。justify-content的對齊方式和主軸的方向有關，下圖以flex-direction為row，主軸方式是從左到右,描述jstify-content5個值的顯示效果:
justify-content
align-items表示側軸上的對齊方式:
stretch?填充整個容器(默認值)flex-start側軸的起點對齊flex-end側軸的終點對齊center?在側軸中居中對齊baseline以子元素的第一行文字對齊
align-tiems設置的對齊方式，和側軸的方向有關，下圖以flex-direction為row,側軸方向是從上到下,描述align-items的5個值顯示效果:
aign-items
有了主軸和側軸的方向再加上設置他們的對齊方式，就可以實現(xiàn)大部分的頁面布局了。
【相關推薦】
2.?小豬CMS生活通O2O系統(tǒng)v2.0尊享版下載
3.?小豬cms(pigcms)微信營銷系統(tǒng)V8.52拼好貨商城二次開發(fā)特別版
Atas ialah kandungan terperinci 詳解微信開發(fā)之Flex布局. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
Bagaimana untuk melaksanakan reka letak responsif menggunakan Vue
Nov 07, 2023 am 11:06 AM
Vue ialah rangka kerja pembangunan bahagian hadapan yang sangat baik Ia menggunakan mod MVVM dan mencapai reka letak responsif yang sangat baik melalui pengikatan data dua hala. Dalam pembangunan bahagian hadapan kami, reka letak responsif adalah bahagian yang sangat penting, kerana ia membolehkan halaman kami memaparkan kesan terbaik untuk peranti yang berbeza, sekali gus meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan reka letak responsif dan memberikan contoh kod khusus. 1. Gunakan Bootstrap untuk melaksanakan reka letak responsif ialah a
Bagaimana untuk melaksanakan susun atur dua lajur melalui susun atur CSS Flex
Sep 26, 2023 am 10:54 AM
Cara melaksanakan reka letak dua lajur melalui reka letak fleksibel CSSFlex Reka letak fleksibel CSSFlex ialah teknologi reka letak moden yang memudahkan proses reka letak halaman web, membolehkan pereka bentuk dan pembangun membuat reka letak yang fleksibel dan boleh disesuaikan dengan pelbagai saiz skrin dengan mudah. Antaranya, melaksanakan susun atur dua lajur adalah salah satu keperluan biasa dalam susun atur Flex. Dalam artikel ini, kami akan memperkenalkan cara menggunakan reka letak anjal CSSFlex untuk melaksanakan reka letak dua lajur yang mudah dan menyediakan contoh kod khusus. Menggunakan bekas dan projek Flex
Apakah sifat susun atur Flex yang biasa digunakan?
Feb 25, 2024 am 10:42 AM
Apakah sifat umum reka letak flex? Contoh kod khusus diperlukan untuk reka letak halaman web yang responsif. Ia memudahkan untuk mengawal susunan dan saiz elemen dalam halaman web dengan menggunakan set sifat yang fleksibel. Dalam artikel ini, saya akan memperkenalkan sifat umum susun atur Flex dan memberikan contoh kod khusus. paparan: Tetapkan mod paparan elemen kepada Flex. .container{display:flex;}flex-directi
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan penyulitan dan penyahsulitan mesej
May 13, 2023 am 11:40 AM
PHP ialah bahasa skrip sumber terbuka yang digunakan secara meluas dalam pembangunan web dan pengaturcaraan sisi pelayan, terutamanya dalam pembangunan WeChat. Hari ini, semakin banyak syarikat dan pembangun mula menggunakan PHP untuk pembangunan WeChat kerana ia telah menjadi bahasa pembangunan yang benar-benar mudah dipelajari dan mudah digunakan. Dalam pembangunan WeChat, penyulitan dan penyahsulitan mesej merupakan isu yang sangat penting kerana ia melibatkan keselamatan data. Untuk mesej tanpa kaedah penyulitan dan penyahsulitan, penggodam boleh mendapatkan data dengan mudah, menimbulkan ancaman kepada pengguna.
Selesaikan masalah gaya reka letak fleksibel dalam Vue
Jun 30, 2023 pm 08:51 PM
Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Fleksibiliti dan ciri yang berkuasa membolehkan pembangun membina aplikasi web yang kaya dengan interaksi dengan mudah. Dalam pembangunan Vue, reka letak flex hampir di mana-mana. Walau bagaimanapun, apabila menggunakan reka letak fleksibel, anda kadangkala menghadapi beberapa isu penggayaan. Artikel ini akan memperkenalkan beberapa kaedah untuk menyelesaikan masalah gaya yang disebabkan oleh reka letak fleksibel. Mula-mula, mari kita fahami konsep asas susun atur fleksibel. Susun atur fleksibel menyediakan model kotak yang fleksibel
Bagaimana untuk melaksanakan susun atur grid yang tidak teratur melalui susun atur CSS Flex
Sep 28, 2023 pm 09:49 PM
Bagaimana untuk melaksanakan susun atur grid yang tidak teratur melalui reka letak elastik CSSFlex, selalunya perlu menggunakan reka letak grid untuk mencapai pembahagian halaman dan susun atur biasanya, dan setiap grid adalah saiz yang sama beberapa susun atur grid yang tidak teratur. Reka letak anjal CSSFlex ialah kaedah susun atur berkuasa yang boleh melaksanakan pelbagai susun atur grid dengan mudah, termasuk susun atur grid yang tidak teratur. Di bawah ini kami akan memperkenalkan cara menggunakan susun atur elastik CSSFlex untuk mencapai yang berbeza
