文章目錄
- 前言
- 1. flex布局和傳統布局的對比
- 1.1 傳統布局
- 1.2 flex布局
- 2. flex布局原理
- 3. flex父盒子常用屬性
- 3.1 flex-direction:設定主軸的方向
- 3.2 justify-content：設定主軸上的子元素的排列方式
- 3.3 flex-wrap：設定子元素是否換行
- 3.4 align-items：設定側軸上的子元素的排列方式（單行）
- 3.5 align-content：設定側軸上的子元素的排列方式（多行）
- 3.6 flex-flow：復合屬性，相當于同時設定了flex-direction和flex-wrap
- 3.7 align-content和align-items的區別
- 總結
前言
今天小編又來了，小編我又來和你們分享我學到的好東西了，俗話說的好，好東西要大家一起分享，不然一個人吃著不香！
1. flex布局和傳統布局的對比
1.1 傳統布局
- 兼容性好
- 布局繁瑣
- 局限性，不能在移動端很好的布局
1.2 flex布局
- 操作方便，布局極其簡單，移動端使用比較廣泛
- PC端瀏覽器支持情況比較差
- IE11或者更低版本不支持Flex或者區域分支持
總結： PC端適合使用傳統布局，因為在PC端不需要考慮兼容性的問題，而移動端比較適用flex布局，
2. flex布局原理
- flex是flexible Box的縮寫，是“彈性布局”的意思，是用來為盒狀模型提供最大靈活性的，所以，任何一個容器都是可以指定flex布局的，
- 當我們為父盒子設定flex布局之后，給子元素設定的float、Clear和vertical-align這三個屬性會失效，
- flex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局，總之這幾個名字都是他，大家知道這幾個名字說的都是同一個東西就好
- 采用Flex布局的元素，稱為Flex容器(Flex Container)，而他里面的所有子元素自動成為容器成員，被稱為Flex專案(Flex item)
總結： Flex布局原理簡單來說就是通過給我們的父盒子添加flex屬性，來控制父盒子里面的子盒子的位置和排序方式，以達到我們布局的目的，
3. flex父盒子常用屬性
- flex-direction:設定主軸的方向
- justify-content：設定主軸上的子元素的排列方式
- flex-wrap：設定子元素是否換行
- align-items：設定側軸上的子元素的排列方式（單行）
- align-content：設定側軸上的子元素的排列方式（多行）
- flex-flow：復合屬性，相當于同時設定了flex-direction和flex-wrap
- align-content和align-items的區別
3.1 flex-direction:設定主軸的方向
- 在flex布局中主要分為主軸和側軸，簡單的理解就是我們常說的行和列或者X軸和Y軸
- 默認的主軸就是X軸，方向是水平向右
- 默認的側軸就是Y軸，方向是水平到下
軸圖如下：
注意： 主軸和側軸是可以變化的，誰是主軸誰是側軸就看你設定的屬性的哪個，而子元素是根據主軸進行排序的
注意： row屬性值就是我們所說的X軸，column屬性值就是我們所說的Y軸
3.2 justify-content：設定主軸上的子元素的排列方式
- flex-start：默認值從頭部開始，如果主軸是X軸，則從左到右
- flex-end：從尾部開始排列
- center：在主軸居中對齊（如果是X軸則 水平居中）
- space-around：平分剩余空間（重要）
- space-between：先兩邊貼邊，再平分剩余空間（重要）
在這里小編為大家準備好了一下小案例，大家可以復制下去在父盒子的樣式里面試試看各個屬性的使用效果，
<!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>
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row;
}
div span {
width: 150px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
3.3 flex-wrap：設定子元素是否換行
- 默認的情況下所有的專案都是排列在一條線上的，也就是在主軸上，flex-wrap默認的是不換行的
- nowrap不換行
- wrap換行
3.4 align-items：設定側軸上的子元素的排列方式（單行）
- 該屬性是控制子項在側軸（默認是Y軸）上的排列方式，這是單行的時候才使用的屬性
- flex-start：從頭部開始
- flex-end：從尾部開始
- center：居中顯示
- stretch拉伸
這個屬性是給子項設定的屬性，大家可以用上面小編給的小案例在子項的樣式里面試試看這些屬性值會給你帶來什么不一樣的體驗，
3.5 align-content：設定側軸上的子元素的排列方式（多行）
- flex-start：默認值在側軸的頭部開始排列
- flex-end：在側軸的尾部開始排列
- center：在側軸中間顯示
- space-around：子項在側軸平分剩余空間（重要）
- space-between：子項在側軸先分布在兩頭，再平分剩余空間（重要）
- 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=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* 換行 */
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
3.6 flex-flow：復合屬性，相當于同時設定了flex-direction和flex-wrap
語法格式：
flex-flow:row wrap;
3.7 align-content和align-items的區別
- align-items適用于單行的情況下，只有上對齊、下對齊、居中和拉伸
- align-content適用于換行（多行）的情況下，也就是說子盒子太多父盒子一行裝不下的時候需要借助flex-wrap屬性換行的時候才有效果，可以設定上對齊、下對齊、居中和拉伸以及平分剩余空間等屬性
- 總之就是單行找align-items，多行找align-content
總結
小編今天的分享到這里就結束了，希望可以幫助到大家！如果覺得小撰寫的還可以，請不要吝嗇你的點贊和評論！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/347176.html
標籤：其他