微信小程式之flex布局

flex布局

flex布局的特點:

設有display:flex或者display:block的元素就是乙個flex container(伸縮容器)，裡面的子元素稱為flex item(伸縮專案)，flex container中子元素都是使用flex布局排版。

display:flex:指定為行內容器模式，在一行內顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)

使用display:block(預設值)的**:

123

改換成display:flex的顯示效果:

可以從效果圖看到block和flex的區別，子元素view是在換行顯示(block)還是行內顯示(flex)。

flex布局的伸縮容器可以使用任何方向進行布局。

容器預設有兩個軸：主軸(main axis)和側軸(cross axis)。

主軸的開始位置為主軸起點(main start)，主軸的結束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。

同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。詳情見下圖:

注意，主軸並不是一定是從左到右的，同理側軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個可選值:

如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。

四種主軸方向設定的效果圖:

示例圖圖中的例項展示了使用了不同的flex-direction值排列方向的區別。

例項**:

123

c1c2c3

子元素有兩種對齊方式：

justify-conent定義子元素在主軸上面的對齊方式

align-items定義子元素在側軸上對齊的方式

align-items表示側軸上的對齊方式:

align-tiems設定的對齊方式，和側軸的方向有關，下圖以flex-direction為row,側軸方向是從上到下,描述align-items的5個值顯示效果:

有了主軸和側軸的方向再加上設定他們的對齊方式，就可以實現大部分的頁面布局了。

微信小程式之flex布局

flex布局在做前端的時候十分的方便快捷，這裡學習了一下分享給大家 flex flexible box 彈性布局盒模型 是2009年w3c提出的一種可以簡潔 快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援 簡單解釋一下概念圖，就是說flex支援橫向布局和...

微信小程式之Flex布局

flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...

微信小程式 flex布局

flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...