實驗室分享–居中對齊
實驗室分享–偽類、偽元素
實驗室分享–display:flex
flex-direction1、flex-direction:決定主軸的方向(即專案的排列方向)。flex-wrap
flex-flow(前兩個屬性合起來一起寫)
justify-content
align-items
align-content
值:column:主軸為垂直方向,起點在上沿。
column-reverse:主軸為垂直方向,起點在下沿。
row(預設值):主軸為水平方向,起點在左端。
row-reverse:主軸為水平方向,起點在右端。
2、flex-wrap:如何換行
nowrap(預設):不換行。3、justify-content屬性:專案在水平軸上的對齊方式。wrap:換行,第一行在上方。
wrap-reverse:換行,第一行在下方。
值:flex-start(預設值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊,專案之間的間隔都相等。
space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
4、align-items:專案在縱軸上如何對齊。
值:flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
5、align-content:多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
值:flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(預設值):軸線佔滿整個交叉軸。
屬性:1、order:決定專案的排列順序。數值越小,排列越靠前,預設為0。order: 數字;order
flex-grow
flex-shrink
flex-basis:屬性定義了在分配多餘空間之前,專案佔據的主軸空間
flex:flex-grow, flex-shrink 和 flex-basis的簡寫
align-self
2、flex-grow:屬性定義專案的放大比例,預設為0。 flex-grow: < number>;
實驗室分享–居中對齊
實驗室分享–偽類、偽元素
實驗室分享–display:flex
實驗室分享 float
實驗室分享 居中對齊 實驗室分享 偽類 偽元素 實驗室分享 display flex 例子 盒子浮動 邊框浮動 1 包裹性 例子 border 4px solid red border 4px solid orange float left 從這就能看float的包裹性。已知block元素不指定wi...
實驗室分享 居中對齊
實驗室分享 居中對齊 實驗室分享 偽類 偽元素 實驗室分享 display flex 1 display flex 這裡用到的是兩個屬性 1 justify content center 定義了專案在主軸上的對齊方式。2 align items center 定義專案在交叉軸上如何對齊。d第一種 c...
雲計算實驗室建設方案分享
大資料 資訊保安 人工智慧等新資訊科技產業發展迅猛,人才極其匱乏,各個本科及職業院校紛紛開設相應的專業方向。但是,絕大多數院校因為師資和積累問題,在專業建設規劃 辦學特色提煉 創新教學模式落地 師資團隊建設 課程體系建設 實訓條件建設等方面存在困難。雲計算實訓教學整體解決方案,包括 雲計算伺服器集群...