css溫故知新 彈性盒子

css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。

通過display:flex; 來指定盒子型別

彈性父元素屬性

flex-direction

指定了彈性子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse

設定彈性盒子在主軸方向上的對齊方式，即flex-direction指定的方向

justify-content: flex-start | flex-end | center | space-between | space-around

與側軸方向上的對其既有相同，又有不同； 戲稱為空隙問題

主軸方向為子元素排列方向，空隙需要大家共享

而align-items為側軸方向，每個位置只有乙個子元素，所以空襲牽涉到拉伸

設定彈性盒子元素在側軸上的對齊方式

align-items: flex-start | flex-end | center | baseline | stretch

作為flex布局的重要屬性，語法如下：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。

即： 當flex-wrap起作用發生換行時，該屬性控制每行的對齊方式

當然，如果改變了flex-direction，則為列的對齊

order

排序，用整數值來定義排列順序，數值小的排在前面。可以為負值。

對齊???

設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。

align-self

align-self 屬性用於設定彈性（子）元素自身在側軸（縱軸）方向上的對齊方式。

flex

flex 屬性用於指定彈性子元素如何分配空間

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

溫故知新 css基礎

css練習 專案參考至mdn 點此檢視效果哦 任務介紹 為整體卡片的容器提供乙個固定的寬 高，背景顏色，邊框，以及邊框圓角等等。為header提供乙個漸變的背景顏色，從更暗到更亮，加上圓角，配合在卡片容器上設定的圓角。為footer提供乙個漸變的背景顏色，從更亮到更暗，加上圓角，配合在卡片容器上設定...

溫故知新 css布局

本文針對多種css布局進行解析 github 浮動 float left 將元素浮動到左側。right 將元素浮動到右側 none 預設 不浮動 inherit 繼承父元素的浮動屬性 定位 position static 預設 靜態定位 將元素放在文件布局流的預設位置 relative 相對定位 允...

溫故知新 ROWTYPE

rowtype 相當於資料庫表裡的一行資料記錄的變數型別。declare 定義乙個emp表裡的一行記錄的資料型別的變數 v emp emp rowtype begin 查詢的emp表裡的資料列必須與v emp的列順序以及個數保持一致 select empno,ename,job,mgr,hireda...