flex布局父项常见属性justify-content
1.flex布局父项常见属性
justify-content设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是 哪个
设置主轴上子元素的排列方式从头排
justify-content:flex-start;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
设置主轴上子元素的排列方式尾部排
justify-content:flex-end;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
设置主轴上子元素的排列方式居中对齐
justify-content:center;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
平均分配剩余空间
justify-content:space-around
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
先两边贴边再平分剩余空间
justify-content:space-between;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
主轴为y轴：
先两边贴边再平分剩余空间（重要）
justify-content:space-between;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
div>
body>
html>
主轴为y轴：
居中对齐：
flex-direction: column;
justify-content:center;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>1span>
<span>2span>
<span>3span>
div>
body>
html>
