給自己看的flex布局方法

2022-03-07 08:07:38 字數 1613 閱讀 5544

flex是flexiblebox的縮寫,中文名字彈性盒子布局,在小程式布局中支援的很好

在試驗之前可以看一下張鑫旭的flex

1.給父容器設定了display:flex;則內部容器的塊狀特性會自動消失(再給內部元素設定display:block無效):

2.設定flex-direction:column則其子元素為垂直排列(高度會自適應) ,

如果不設定flex-direction,則缺省會設定成row(橫向布局)

.3.設定顛倒(所有元素對齊的方向也會改變,對於豎直排序的也一樣):

4.justify-content:start/end 設定了子元素的對齊方向

justify-content:center 設定子元素居中

justify-content:space-between :平均分布

justify-content:space-between :等距分布(1號元素與2號元素與3號元素左右的距離都相等)

垂直居中:

垂直水平居中:

5.主軸和交叉軸:

誰是主軸根據flex-direction來指定

row:水平方向是主軸

colmun:垂直方向的是主軸

justify-content指的是主軸上面的排列方式;

align-items指的是交叉軸上面的排列方式;

要下圖的布局方式是對垂直方向的子元素的對齊方向改變,所以只需要justify-content的樣式:

根據文字基線對齊

如果子元素的寬度大於父元素的寬度,又沒有設定換行,則會自動調整子元素寬度

設定換行(設定高度可以消除與上邊兩個的間距)

寫給自己看的 Flex 布局

flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局,包括行內元素。當設定display flex時,該容器視為塊級元素,如果設定為display inline flex,則該容器視為行內元素。設定為 flex 布局...

雜記 給自己看的

隨筆 我就簡單的來總結一下我寒假在家的這段時間。思想的上帝行動的矮子,還記得在學校的時候,經常說的一句話就是,什麼時候可以讓我安靜一會,啥時候可以在宿舍裡沒有事,一直在宿舍裡面呆著,然後呆在宿舍裡面好幾天可以不用出門。後來的後來,結果還是沒有滿足我的願望,總感覺還沒有呆在宿舍呆到過癮的時候,那邊的那...

think js 詳解(給自己看的)

const base require base.js module.exports class extends base 獲取區域工單 async areaaction if think.isempty limit console.log user id 列印的在命令視窗檢視 let sum pag...