flex 基本概念
flex布局（flex是flexible box的縮寫）， 也稱為彈性盒模型 。將屬性和屬性值（display:flex; ）寫在哪個標籤樣式中，誰就是 容器；它的所有子元素自動成為容器成員，稱為項目。
當一個元素的display 取值為flex，所有項目(子元素)會在一行显示；如果所有項目的尺寸之和大於容器，也不會超出父元素的寬、高度。不會換行(每個項目都會自動縮小相應的比例)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局之:flex</title>
<link rel="stylesheet" href="./CSS/normalize.css">
<style>
section {
width: 500px;
height: 800px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<section>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</section>
</body>
</html>
頁面效果 ： 每一個項目都等比例縮小了。
css代碼分為兩種: 一類是適用於容器的 (設置主軸的起始位置、換行、主軸的對齊方式、多跟軸線對齊方式)；一類是適用於項目的(設置項目的位置)。
容器常用的屬性和屬性值
由於重複代碼較多，就不一 一上傳代碼了,大家可以自己動手，敲敲代碼，試試看。
一、設置主軸的起始方向 flex-direction：
默認為X軸（行）：
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
flex-direction:row; 默認是X軸的起始方向為開始位置 (從左到右依次擺放)；
flex-direction:row-reverse; 改變X軸的起始方向為結束位置 (從右到左依次擺放)；
設置主軸的起始方向為Y軸（列）：
flex-direction:column; 默認是Y軸的起始方向為開始位置(從上到下依次擺放)
flex-direction:column-reverse; 改變Y軸的起始方向為結束位置(從下到上依次擺放)
二、設置項目是否換行 flex-wrap：（默認是不換行）
<style>
section {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
flex-wrap: nowrap; 默認值是不換行；（n個項目都會在一行显示.如果項目尺寸之和大於容器主軸的尺寸,則項目會自動縮小相應比列.） (參考第一個代碼 頁面結果展示)
flex-wrap: wrap; 設置換行；（超出主軸的寬，則進行換行。換行后，兩行之間會出現間距，是因為垂直方向有剩餘空間，會平均分配給第二行的上下）
flex-wrap: wrap-reverse; 倒序換行；（如果有兩行,第2行显示在前面,第一行显示在後面）
三、主軸方向的對齊方式 justify-content：
項目是一個時：
<style>
section {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
justify-content:flex-start; 以主軸開始方向對齊 (默認)
justify-content:flex-end; 以主軸結束方向對齊
justify-content:center; 主軸方向居中
項目是多個時:
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
justify-content: space-between; 兩端對齊 （第一個項目在容器的起始位置,最後一個項目在容器的結束位置，中間距離相等）
justify-content: space-around; 分散對齊
justify-content: space-evenly; 平分剩餘空間，每個項目之間的距離相同
四、主軸改變為交叉軸方向的對齊方式
一根軸線： 主軸需改變為Y軸：flex-direction: column;
align-items: baseline; 以項目的第一行文字的基線對齊
align-items: stretch; (項目沒有給高的情況下,stretch就是默認值，如果項目沒有設置高度,就是容器的高）
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
/* 主軸需改變為Y軸 項目按列擺放 */
flex-direction: column;
/* align-items: flex-start; 默認擺放方式 */
/* align-items: center; */
/* align-items: flex-end; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
align-items: flex-start; 交叉軸從開始位置對齊
align-items: center; 交叉軸居中對齊
align-items: flex-end; 交叉軸從結束位置對齊
多根軸線： (所有項目的尺寸之和，必須大於容器的尺寸,使項目換行显示)
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* align-content: center; */
/* align-content: flex-end; */
/* align-content: space-between; */
/* align-content: space-around; */
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
align-content: flex-start; 交叉軸從開始位置對齊
align-content: center; 交叉軸居中對齊
align-content: flex-end; 交叉軸從結束位置對齊
align-content: space-between; 交叉軸兩端對齊
align-content: space-around; 交叉軸分散對齊
align-content: space-evenly; 交叉軸平均分配
項目的屬性和屬性值：
一、order 控制項目位置
order：1；
取值 : 正、負數 (默認值是 0)
值越小越靠前 值越大越靠後 。
（適用場景: 1.搜索引擎優化,提升SEO 把重要的信息在html代碼中靠前擺放,但不影響布局 2.調整項目位置）
<style>
section {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(4) {
order: -1;
}
</style>
設置一個或多個[項目]在交叉軸的對齊方式:
<style>
section {
width: 800px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(2) {
align-self: center;
}
div:nth-child(3) {
align-self: flex-end;
}
</style>
align-self: flex-start; 設置項目在交叉軸開始位置擺放 （默認位置）
align-self: center; 設置項目在交叉軸居中擺放
align-self: flex-end; 設置項目在交叉軸結束位置擺放
設置某一個或多個元素放大比例
條件:所有項目的尺寸之和要小於容器的尺寸
（沒有剩餘空間，則設置此屬性無效。）
一個元素有 flex-grow 屬性
<style>
section {
width: 800px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
display: flex;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
div:nth-child(2) {
flex-grow: 1;
}
</style>
多個項目有flex-grow 屬性
<style>
section {
width: 800px;
height: 200px;
border: 2px solid black;
margin: 50px auto;
display: flex;
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
border: 1px solid tomato;
box-sizing: border-box;
}
div:nth-child(2) {
flex-grow: 1;
}
div:nth-child(4) {
flex-grow: 2;
}
</style>
效果展示
將容器的剩餘空間分成相應的flex-grow的份數，再按照每個項目的份數，分給有flex-grow屬性的項目。
總之，flex使用起來特別方便，可適用於響應式布局，也可使用聖杯布局。只是屬性較多，也要多練、多實踐 ，相信你也能很快熟練使用flex的。
推薦一個小遊戲，很有趣，又能增強關於flex的使用方法 ：Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh-cn 去幫助小青蛙回家吧~~
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整
※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!
※教你寫出一流的銷售文案?
※超省錢租車方案
※聚甘新
