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...