文章目錄
- 前言
- 一、Flex布局是什麼？
- 二、基礎用法
-
- 1.display:flex;
- 2.父項常見屬性
前言
flex 是常用的 css3 布局方式，可以用少量的代碼高效的實作各種頁面布局，是一個基礎的但是必須會的基本技能
一、Flex布局是什麼？
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
二、基礎用法
1.display:flex;
如果你想用flex布局，首先得在父盒子裡填寫 display:flex;屬性,來控制子盒子的屬性和排列方式。
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
div{
display: flex;
width: 80%;
height: 300px;
background-color: #00FFFF;
}
div span{
width: 220px;
height: 100px;
background-color: #DB7093;
margin: 10px;
}
效果如圖：
當父級盒子設為flex布局以後，子元素的float、clear、和vertical-align屬性将失效
2.父項常見屬性
1、flex-direction:設定主軸方向
1、預設主軸是x軸,行row 元素跟着主軸來排列
flex-direction: row;
2、按照列來排列
flex-direction:column;
3、反向布局,颠倒順序
flex-direction: column-reverse;
flex-direction: row-reverse;
代碼如下：
/* 預設主軸是x軸,行row 元素跟着主軸來排列*/
/* 按照行來排列 */
/* flex-direction: row; */
/* 按照列來排列 */
flex-direction:column;
/* 反向布局,颠倒順序 */
/* flex-direction: column-reverse; */
/* flex-direction: row-reverse; */
}
如圖：
2、justify-content:設定主軸上子元素排列方式
注意：使用這個屬性之前一定要确定好主軸是哪個。
1、 主軸方向水準居中
justify-content: center;
2、左邊
justify-content: flex-start;
justify-content: left;
3、右邊
justify-content: flex-end;
justify-content: right;
4、平均配置設定空間距離
justify-content: space-around;
5、控制子元素的布局空間 ，先兩邊貼邊，再配置設定剩餘的空間
justify-content: space-between;
/* 平均配置設定空間距離 */
justify-content: space-around;
3、flex-wrap:換行
flex布局中,預設的子元素是不換行的 如果裝不開，會縮小子元素的寬度
4、align-items:設定側軸子元素排列方式 單行
1、 預設值 從上到下
align-items: flex-start;;
2、從下到上
align-items: flex-end;
3、擠在一起居中
align-items: center;
4、拉伸,但是子盒子不要給高度
align-items: stretch;
/* 拉伸,但是子盒子不要給高度 */
align-items: stretch;
5、align-content:設定側軸子元素排列方式 多行
隻能用于子項出現換行的情況
1、 預設值 從上到下
align-content: flex-start;;
2、從下到上
align-content: flex-end;
3、居中
align-content: center;
4、子項在側軸平分剩餘空間
align-content: space-around;
5、上下貼邊
align-content: space-between;
flex-wrap: wrap;
align-content: space-around;
6、flex-flow:組合寫法 多行