文章目錄
- 前言
- 一、flex布局體驗
- 二、flex布局原理
- 三、flex布局父項常見屬性
- 1.flex-direction設定主軸的方向
- 2.justify-content主軸上子元素排列方式
- 3.flex-wrap設定子元素是否換行
- 4.align-items側軸上的子元素排列方式（單行）
- 5.align-content側軸子元素排列方式（多行）
- 6.flex-flow復合屬性
- 四、flex布局子項常見屬性
- 1.flex屬性
- 2.align-self屬性
- 3.order屬性
- 總結
前言
這部分學習flex布局，還是通過寫一個移動端網頁進行練習，這里就只記錄理論知識啦，
提示：以下是本篇文章正文內容，下面案例可供參考
一、flex布局體驗
傳統布局：
（1）兼容性好
（2）布局繁瑣
（3）局限性，不能在移動端很好的布局
flex布局：
（1）操作方便，布局極為簡單，移動端應用廣泛
（2）pc端瀏覽器支持情況較差
（3）IE11或更低版本，不支持或區域分支持
建議：
（1）pc端頁面使用傳統布局
（2）移動端或者是不考慮兼容性問題的pc端，使用flex彈性布局
代碼如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
width: 800px;
height: 200px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
二、flex布局原理
采用flex布局元素，成為flex容器，簡稱容器，他的所有子元素自動稱為容器成員，成為flex專案，簡稱專案，
通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式，
三、flex布局父項常見屬性
1.flex-direction設定主軸的方向
默認主軸方向就是x軸方向，水平向右；側軸方向就是y軸方向，垂直向下，
注意：主軸和側軸是會發生變化的，就看flex-direction設定誰為主軸，剩下的就是側軸，子元素是跟著主軸來排列的，
代碼如下（示例）：
/* 默認主軸方向從左往右 */
flex-direction: row;
/* 主軸方向從右往左 */
flex-direction: row-reverse;
/* 主軸方向從上往下 */
flex-direction: column;
/* 主軸方向從下往上 */
flex-direction: column-reverse;
2.justify-content主軸上子元素排列方式
代碼如下（示例）：
/* 從主軸開始位置對齊 */
justify-content: flex-start;
/* 從主軸結束位置對齊 */
justify-content: flex-end;
/* 位于主軸居中對齊 */
justify-content: center;
/* 平分主軸剩余空間 */
justify-content: space-around;
/* 兩邊貼邊對齊，剩余子專案平分剩余空間 */
justify-content: space-between;
3.flex-wrap設定子元素是否換行
代碼如下（示例）：
/* 默認不換行 */
flex-wrap: nowrap;
/* 換行進行顯示 */
flex-wrap: wrap;
4.align-items側軸上的子元素排列方式（單行）
代碼如下（示例）：
/* 默認側軸上從上往下排列 */
align-items: flex-start;
/* 從下往上加載 */
align-items: flex-end;
/* 居中加載 */
align-items: center;
/* 拉伸 */
align-items: stretch;
5.align-content側軸子元素排列方式（多行）
代碼如下（示例）：
/* 側軸整體位于開始位置 */
align-content: flex-start;
/* 側軸整體位于結束位置 */
align-content: flex-end;
/* 側軸位于居中位置 */
align-content: center;
/* 側軸拉伸 */
align-content: stretch;
/* 平均分布 */
align-content: space-around;
/* 上下對齊，剩余空間給剩下的子專案平局分布 */
align-content: space-between;
總結：
align-items屬性只適合單行，只有上對齊，下對齊，居中和拉伸；
align-content屬性適合多行，有上對齊，下對齊，居中，拉伸以及平均分配剩余空間的屬性值，
6.flex-flow復合屬性
代碼如下（示例）：
/* flex-direction: row; */
/* 換行進行顯示 */
/* flex-wrap: wrap; */
flex-flow: row wrap;
四、flex布局子項常見屬性
1.flex屬性
子專案分配父盒子的剩余空間，屬性值為數字，1代表占總分中的一份，默認值為0，
代碼如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 80%;
height: 80px;
margin: 10px auto;
background-color: pink;
}
section div:nth-child(1),section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: purple;
}
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: salmon;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
效果展示：
2.align-self屬性
允許單個子專案有與其他子專案不同的對齊方式，默認值為auto，表示繼承父元素的align-items，如果沒有父元素等同于stretch，
代碼如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
width: 800px;
height: 500px;
background-color: pink;
/* 默認主軸方向從左往右 */
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
div span {
width: 150px;
height: 100px;
background-color: rebeccapurple;
}
div span:nth-child(2) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
效果展示
3.order屬性
定義專案在加載時，有自己的先后順序，屬性值為數值，數字越小越靠前，默認值為0
代碼如下（示例）：
div span:nth-child(2) {
/* 往前面調，屬性值要小于零 */
/* order: -1; */
/* 往后調順序 */
order: 2;
}
效果展示
總結
流式布局就學習到這里啦，自己做一個專案來進行練習，這里就不展示了，每天堅持學習前端，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273732.html
標籤：其他