常見的布局方法及優缺點

頁面布局常用的方法有浮動、定位、flex、grid網格布局、柵格系統布局

浮動：

優點：兼容性好。
缺點：浮動會脫離標準文檔流，因此要清除浮動。我們解決好這個問題即可。

絕對定位

優點：快捷。
缺點：導致子元素也脫離了標準文檔流，可實用性差。

flex 布局（CSS3中出現的）

優點：解決上面兩個方法的不足，flex布局比較完美。移動端基本用 flex布局。

網格布局（grid）

CSS3中引入的布局，很好用。代碼量簡化了很多。

利用網格布局實現的一個左右300px中間自適應的布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>html * {padding: 0;margin: 0;}/* 重要：設置容器為網格布局，寬度為100% */.layout.grid .left-center-right {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;  /* 重要：設置網格為三列，并設置每列的寬度。即可。*/}.layout.grid .left {background: red;}.layout.grid .center {background: green;}.layout.grid .right {background: blue;}</style>
</head>
<body><section class="layout grid"><article class="left-center-right"><div class="left">我是 left</div><div class="center"><h1>網格布局解決方案</h1>我是 center</div><div class="right">我是 right</div></article></section>
</body>
</html>

柵格系統布局

優點：可以適用于多端設備

flex布局

flex布局極大的提高了我們布局的效率,更簡單、靈活.

在flex布局中,沒有塊級元素,行內元素,行內塊元素之分,任何元素都可以直接設置寬高和在一行顯示.

同時,flex布局中也不存在脫標的情況,這樣一來可以很好的迭代掉 float 不用去考慮脫標和清除浮動的問題.

當然flex也存在一些兼容性問題,再不考率問題的時候可以優先考慮 flex 布局.

在真實的應用場景中，通常會遇到各種各樣不同尺?和分辨率的設備，為了能在所有這些設備上正常的布局我們的應用界面，就需要響應式的界?設計方式來滿?這種復雜的布局需求。

flex 彈性盒模型的優勢在于開發?員只需要聲明布局應該具有的?為，?不需要給出具體的實現?式，瀏覽器負責完成實際布局，當布局涉及到不定寬度，分布對?的場景時，就要優先考慮彈性盒布局。

你能聯想到的flex語法有哪些呢?

flex-direction: 調整主軸方向

row：主軸方向為水平向右
column：主軸方向為豎直向下
row-reverse:主軸方向為水平向左
column-reverse:主軸方向是豎直向上。

justify-content主要用來設置主軸方向的對齊方式

flex-start: 彈性盒子元素將向起始位置對齊
flex-end: 彈性盒子元素將向結束位置對齊。
center: 彈性盒子元素將向行中間位置對齊
space-around: 彈性盒子元素會平均地分布在行里
space-between:第一個貼左邊，最后一個貼右邊，其他盒子均分，保證每個盒子之間的空隙是相等的。

align-items用于調整側軸的對齊方式

flex-start：元素在側軸的起始位置對齊。?
flex-end：元素在側軸的結束位置對齊。
center：元素在側軸上居中對齊。
stretch：元素的高度會被拉伸到最大（不給高度時, 才拉伸）。

flex-wrap屬性控制flex容器是單行或者多行,默認不換行

nowrap： 不換行（默認），如果寬度溢出，會壓縮子盒子的寬度。

wrap： 當寬度不夠的時候，會換行。

align-content用來設置多行的flex容器的排列方式

flex-start：各行向側軸的起始位置堆疊。?
flex-end：各行向彈性盒容器的結束位置堆疊。
center：各行向彈性盒容器的中間位置堆疊。
space-around：各行在側軸中平均分布。?
space-between：第一行貼上邊，最后一個行貼下邊,其他行在彈性盒容器中平均分布。?
stretch：拉伸，不設置高度的情況下。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/23996.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/23996.shtml
英文地址，請注明出處：http://en.pswp.cn/web/23996.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！