flex佈局父項常見屬性justify-content
1.flex佈局父項常見屬性
justify-content設定主軸上的子元素排列方式
justify-content 屬性定義了專案在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是 哪個
設定主軸上子元素的排列方式從頭排
justify-content:flex-start;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
justify-content:flex-start;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
設定主軸上子元素的排列方式尾部排
justify-content:flex-end;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
justify-content:flex-end;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
設定主軸上子元素的排列方式居中對齊
justify-content:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
justify-content:center;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
平均分配剩餘空間
justify-content:space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
/* justify-content:center; */
/* 平分剩餘空間 */
justify-content:space-around;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
先兩邊貼邊再平分剩餘空間
justify-content:space-between;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
/* justify-content:center; */
/* 平分剩餘空間 */
/* justify-content:space-around; */
/* 先兩邊貼邊，再分配剩餘的空間 */
justify-content:space-between;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
主軸為y軸：
先兩邊貼邊再平分剩餘空間（重要）
justify-content:space-between;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
/* justify-content:center; */
/* 平分剩餘空間 */
/* justify-content:space-around; */
/* 先兩邊貼邊，再分配剩餘的空間 */
flex-direction: column;
justify-content:space-between;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<!-- <span>4</span> -->
</div>
</body>
</html>
主軸為y軸：
居中對齊：
flex-direction: column;
justify-content:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
/* 預設的主軸式x軸 row */
/* justify-content:是設定主軸上子元素的排列方式 */
/* justify-content:flex-start; */
/* justify-content:center; */
/* 平分剩餘空間 */
/* justify-content:space-around; */
/* 先兩邊貼邊，再分配剩餘的空間 */
flex-direction: column;
justify-content:center;
}
div span {
width: 150px;
height:100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<!-- <span>4</span> -->
</div>
</body>
</html>
相關文章
- flex佈局父項常見屬性flex-flowFlex
- flex佈局父項常見屬性align-itemsFlex
- Flex常見佈局例項Flex
- flex佈局屬性Flex
- CSS Flex佈局屬性整理CSSFlex
- flex佈局屬性快速參考Flex
- Flex佈局教程及屬性速查Flex
- CSS Flex 佈局的 flex-direction 屬性講解CSSFlex
- flex佈局（彈性佈局）Flex
- flex彈性佈局程式碼例項Flex
- 淺談Flex佈局的屬性及使用Flex
- 鄧洋前端學習——Flex佈局之flex-basis屬性前端Flex
- 用Flex實現常見的幾種佈局Flex
- display: flex彈性佈局程式碼例項Flex
- 簡單聊一聊Flex佈局常用的屬性Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- flex彈性佈局 響應式佈局Flex
- React戰記之玩轉Flex佈局(上篇–容器屬性)ReactFlex
- React戰記之玩轉Flex佈局(上篇--容器屬性)ReactFlex
- 淺談CSS3中display屬性的Flex佈局CSSS3Flex
- flex佈局語法+例項Flex
- Flex 佈局教程：例項篇Flex
- flex彈性佈局 垂直居中Flex
- css之彈性佈局（flex）CSSFlex
- 彈性盒模型，flex佈局模型Flex
- 進一步瞭解flex佈局—來實現這些常見佈局吧Flex
- 重新總結flex佈局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）Flex
- 常見的佈局
- 淺談CSS3中display屬性的Flex佈局（轉）CSSS3Flex
- flex居中佈局程式碼例項Flex
- CSS例項詳解：Flex佈局CSSFlex
- flex 彈性佈局的基本操作Flex
- React Native——flex（彈性佈局）React NativeFlex
- flex 佈局Flex
- Flex佈局Flex
- 常見頁面佈局
- CSS常見佈局技巧CSS