Flexbox display: flex;

如果也想設置內聯元素為彈性盒子，可以使用display:inline-flex;

實現三種其他布局難以達到的效果：

在父內容里面垂直居中一個塊內容。

使容器的所有子項占用等量的可用寬度/高度，而不管有多少寬度/高度可用。

使多列布局中的所有列采用相同的高度，即使它們包含的內容量不同。

flex盒子屬性(只對flex container彈性盒子起作用)

屬性

值

備注

flex-direction

row(默認)/column

用來指定主軸方向

flex-wrap

wrap/wrap-reverse

自動換行，防止內容溢出

justify-content

flex-start(默認)/flex-end/center/space-around(均勻分布)/space-between(不會在兩端留下任何空間)

控制子項在主軸上的位置

align-items

stretch(默認)/center/flex-start/flex-end

控制子項在交叉軸上的位置，align-self可以覆蓋align-itemsflex-flow：flex-direction和flex-wrap的縮寫。

彈性盒子的子元素上可以應用flex屬性，實現每個元素的動態尺寸，并可以自由處理剩余空間。

彈性盒子的子元素上可以應用order屬性進行子項的任意排序。

兼容性(只支持IE11)

布局方案匯總

以前只有float和position被廣泛用于布局中，未來我們可以期待flexbox和grid。

float浮動布局

百分比寬度布局

單邊固定流體布局

inline-block布局

將元素設為display: inline-block進行布局(不建議整體布局時使用)。

布局注意點：

vertical-align屬性會影響到inline-block元素，你可能會把它的值設置為top 。

你需要設置每一列的寬度。

如果HTML源代碼中元素之間有空格，那么列與列之間會產生空隙。

position定位布局

凍結布局

用一個全局性的固定大小的div包裹整個頁面，給這個div設置一個寬度width，并使用margin:0 auto;將整個頁面在瀏覽器中居中。

圣杯布局

為三列嵌套一個container box，對這個box設置padding-left和padding-right，留出左右列的空間。

中間盒子設置width:100%;，三列盒子都設置float: left;。

使用margin-left: -100%;和相對定位的right值把左邊盒子放入正確的位置。

使用marigin-right同樣放置好右邊的盒子。

進行整體margin的調整，留出三列的邊距。

圣杯布局的關鍵在于兩邊的列元素設置負值 margin 可以抵消掉.container容器元素設置的padding，推薦對這一塊兒進行拓展閱讀

雙飛翼布局

在圣杯布局的基礎上，在中間列的內容外再包裹一層div，直接用css調整包裹層div的位置，就可以更加便捷的操控中間列的內容不被兩邊遮擋，還能方便設置與兩邊的間距。

flexbox布局

Grid布局

跟布局相關的技術總結

媒體查詢

注：媒體查詢可以直接嵌入中。

Meta Viewport and @viewport

有些CSS屬性需要觸發叫做hasLayout的東西，觸發hasLayout是用來支持舊瀏覽器的(IE6/IE7等)。

css reset

Normalize.css

常規reset.css

布局類型

布局類型無非就是一列/兩列/三列/等分列/混合布局等。

三欄布局：圣杯布局和雙飛翼布局 及 三種三欄網頁寬度自適應布局方法

margin-left：-100%怎么理解？可是手動設置一下margin-left：-200px-300px-500px，結合父元素留出的padding，多看看效果，理解這個問題主要在于兩點：一是按CSS規定，浮動元素會盡量往上浮動；二是margin負值會改變元素占據的空間。可參考：為什么左邊的模塊margin-left：-100%會跑到左上方

擴展閱讀

布局中的問題記錄

width寬度設為100%后，再設置margin/padding會超出屏幕

解決方案：width值為100%指的是寬度為其父元素寬度，如果父元素本身就是body，那么再設置邊距就會超出屏幕。解決方法就是使用box-sizing: borde-box;再使用padding設置間距(不要使用margin)。如果只是為了自適應，也可以試試不設置寬度，不一定非要把寬度設為100%。

當li在ul里浮動時，如果想當鼠標hover到li時改變它的高度，會發現所有的li會同時往上浮動，這是因為改變的那個li的高度將ul撐開了，其余的li又是遵循浮動的，會盡量往上浮動。解決的辦法就是不要對li使用浮動，而是使用display:inline-block;。

將li設置為橫排nav有兩種辦法：float和display: inline-block。

總結

以上是生活随笔為你收集整理的flex 平铺布局_flex布局及各种布局的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。