2. 程式人生 > >移動端的自適應佈局神器—Flex Box(2)

移動端的自適應佈局神器—Flex Box(2)

阿新 • • 發佈：2019-01-10

之前的例子中，都是按照水平方向為例的，這些例子中的元素，高度都是相同的。如果元素的高度不同，在縱向方向上，也需要設定一些對齊方式。Flex佈局中也為我們提供了在另一個方向上對齊的設定，這個屬性就是align-item。align-items有五個選項值，它們分別是：

stretch — 設定元素佔滿整個長度，前提是沒有指定這些元素的高度，這是預設值

flex-start — 設定元素在起點對齊

flex-end — 設定元素終點對齊

center — 設定元素按照中線對齊

baseline — 設定元素按照每個元素中第一行文字的基線對齊

下面的例子中可以直觀的看到align-item屬性是如何進行工作的。

程式碼：

<!DOCTYPE>
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style type="text/css">
.container{
  display:flex;
  display:-webkit-flex;
  border: 2px solid black;
  padding: 20px;
  margin: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.item1{
  padding-top: 10px;
  background: green;
  width: 200px;
  height: 100px;
  margin: 10px;
  font-weight: bold;
}
.item2{
  padding-top: 50px;
  background: green;
  width: 300px;
  height: 200px;
  margin: 10px;
  font-weight: bold;
}
.item3{
  background: green;
  width: 100px;
  height: 50px;
  margin: 10px;
  font-weight: bold;
}
.item4{
  padding-top: 100px;
  background: green;
  width: 100px;
  height: 150px;
  margin: 10px;
  font-weight: bold;
}
.flex-start{
  align-items: flex-start;
}
.flex-end{
  align-items: flex-end;
}
.center{
  align-items: center;
}
.stretch{
  align-items: stretch;
}
.baseline{
  align-items: baseline;
}
</style>
</head>
<body>
<div class="container flex-start">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container flex-end">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container center">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container baseline">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container stretch">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
</body>
</html>

這個例子有幾處修改需要注意。首先，我們為不同的item元素添加了不同的padding-top值，這是為了能夠看出baseline的作用（按照第一行文字的基線對其）。其次，修改了不同item元素的高度，從而能夠看出使用align-items屬性後元素的展現的變化情況。

通過這個示例，就可以很清晰的明晰align-items是如何影響元素對齊方式的了。注意，當設定為stretch時，由於為元素設定了高度，所以最後的表現形式看起來和設定為flex-start的情況差不多。如果沒有設定高度，每個元素的高度都會等於100%。

當有多個元素，並且設定了元素可以換行時，可能會出現在彈性容器內部中包含了很多行元素。以水平為例，這麼多行的元素，每一行其實都有一個主軸，而這些主軸的對齊方式，其實也可以設定對齊方式。這個屬性是align-content。這個屬性的作用，可以理解為把每一行元素看成是一個元素，然後去在縱軸方向按不同的方式排列他們，類似於之前的align-items。只不過，這裡排列的單位是軸線。

align-content屬性包含的屬性值和justify-content屬性包含的屬性值完全相同，通過下面的例子，來體會一下align-content屬性是如何對軸線進行排列的。

<!DOCTYPE>
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style type="text/css">
.container{
  display:flex;
  display:-webkit-flex;
  border: 2px solid black;
  padding: 20px;
  margin: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: 300px;
}
.item1{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item2{
  background: green;
  width: 300px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item3{
  background: green;
  width: 100px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item4{
  background: green;
  width: 100px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item5{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item6{
  background: green;
  width: 300px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item7{
  background: green;
  width: 80px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item8{
  background: green;
  width: 50px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item9{
  background: green;
  width: 120px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item10{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.flex-start{
  align-content: flex-start;
}
.flex-end{
  align-content: flex-end;
}
.center{
  align-content: center;
}
.stretch{
  align-content: stretch;
}
.space-around{
  align-content: space-around;
}
.space-between{
  align-content: space-between;
}
</style>
</head>
<body>
<div class="container flex-start">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container flex-end">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container center">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container strench">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container space-between">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container space-around">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
</body>
</html>

上面就介紹完了所有可以在彈性容器中設定的所有屬性。這些屬性，都是在父元素中設定的，通過為父元素設定這些屬性，可以改變其中子元素的排布方式。

喜歡讀書的，喜歡學知識的小夥伴，歡迎關注公眾號“精粹微閱讀”加入我們哦～～～


相關推薦

移動端的自適應佈局神器—Flex Box(2)

之前的例子中，都是按照水平方向為例的，這些例子中的元素，高度都是相同的。如果元素的高度不同，在縱向方向上，也需要設定一些對齊方式。Flex佈局中也為我們提供了在另一個方向上對齊的設定，這個屬性就是align-item。align-items有五個選項值，它們分別是：stret

移動端自適應佈局方案-rem佈局.md

Rem是CSS3新引入的單位，通過動態設定根元素html的font-size，等比縮放元素大小以達到適應移動裝置的目的。 在W3C官網上是這樣描述rem的——“font size of the root element” 。 當我們指定一個元素的font-size為2

移動端自適應佈局解決方案：rem佈局

      之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！        2018.10.24更新       首先在html裡面設定一下視口： <meta

移動端自適應佈局----rem字型

一.px,em,rem之間聯絡與區別 px：畫素是相對於顯示器螢幕解析度而言的相對長度單位，不會受螢幕寬度改變 em：繼承父級的font-size，與父級的字型大小有關rem：是em的升級版，rem只會相對html的值，不會受到父級的影響。 二.移動端怎麼用rem 假設設

【css】移動端自適應佈局與字型大小自適應

一、vw, vh vw它是根據可視區的寬度來計算的。 vh它是根據可視區的高度來計算的。 <body> <style> body { margin:0; } .te

移動端自適應佈局解決方案——rem

自適應佈局方案有百分比佈局、flex佈局、彈性flex佈局等，但是都有一些缺點。 百分比佈局缺點：字型大小需要另外一套自適應方法來調整；當螢幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。 flex佈局、彈性flex佈局：在移動端會出現一些支援的相容問題。 rem W3C官

基於REM的移動端自適應佈局方案

背景現在工作中有超過一半的時間用於移動端專案的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式佈局的要求更高，不能像PC頁面一樣設計幾個斷點利用媒體查詢，兩邊留空白就解決。移動端頁面需要把螢幕空間都利用上，而移動裝置的

pc移動端自適應佈局js指令碼（一）

(function(){ //點選一級目錄 $(".first-leve-div span").click(function(e){ e.stopPropagation(); $(this).next("ul").slideT

pc移動端自適應佈局html頁面（二）

效果圖<!doctype html> <html lang=""> <head> <meta charset="utf-8"> <meta name="description" content=""&

pc、移動端 自適應佈局方案

1、PC端 做一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080 使用了以下幾種方案 1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裡面

移動端自適應適配佈局的方法總結

原文出處：https://blog.csdn.net/zmm13298329239/article/details/83307842  延伸閱讀：移動前端自適應適配佈局解決方案和比較 方法一：rem佈局（個人最喜歡的方法） 首先確定你的設計稿是基於iphone6還是iphone4

使用Flexible實現手淘H5頁面的終端適配rem自適應佈局-移動端自適應必備

曾幾何時為了相容IE低版本瀏覽器而頭痛，以為到Mobile時代可以跟這些麻煩說拜拜。可沒想到到了移動時代，為了處理各終端的適配而亂了手腳。對於混跡各社群的偶，時常發現大家拿手機淘寶的H5頁面做討論——手淘的H5頁面是如何實現多終端的適配？ 那麼趁此Amfe阿里無線前端團

rem自適應佈局-移動端自適應必備

;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); va

rem自適應佈局-移動端自適應必備:flexible.js

由於移動端特殊性，本文講的是如何使用rem實現自適應，或叫rem響應式佈局，通過使用一個指令碼就可以rem自適應，不用再為各種裝置寬度不同而煩惱如何實現自適應的問題。 rem是相對於根元素，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬

移動端自適應：flexible.js可伸縮佈局使用

本文的內容就是介紹淘寶彈性佈局方案lib-flexible實踐，分享給大家供大家參考，具體內容如下 1. 頁面需求 這是要做的頁面效果（不要對設計置評，這不是開發人員決定的）： 這是尺寸標註圖（750*1334）： 然後美工在750*1334的設計稿之上

移動端自適應

flex var dom out ice cal one content viewport 此代碼加到head標簽裏面，加入後可隨不同機型的移動設備，設置html的fontSize大小，這樣子用rem可作為解決移動端自適應的方案 !function(N,M){funct

webstorm下的sass自動編譯和移動端自適應實踐

info www .html ted 嘗試 ini 移動 工作文件夾 data http://www.fawwheel.com/shahramLu/p/6477731.html webstorm下的sass自動編譯和移動端自適應實踐 1、安裝Ruby 2、安裝s

eChars移動端自適應學習筆記

位置 16px out 其中 內部 pri base cal print 有時會出現一個圖表需要同時在PC、移動端上展現的場景。這需要 ECharts 內部組件隨著容器尺寸變化而變化的能力。為了解決這個問題，ECharts 完善了組件的定位設置，並且實現了類似 CSS Me

jsp頁面在 移動端 自適應，chrome瀏覽器沒問題，可是safari瀏覽器有問題的解決方法

ref orm one 方法 viewport 轉載 min maximum 顯示 在網頁中設置的1px與物理像素中的1px不會相同，所以導致不同在不同手機上顯示結果都不相同，通過以下設置找到了適合當前網頁自適應不同手機、不同瀏覽器的辦法，代碼如下： “ <meta

移動端自適應rem的設置

需要 spa 移動端 size 開發 .get 字體大小 問題 one 一般所熟知的css樣式大小單位有px，em。 px：精確地描述元素大小，不隨屏幕大小的變化而變化； em：相對於父元素的大小，如果有層層嵌套的話會導致這個值非常大或者非常小。 在寫移動端頁面的時候為了使