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布局父项常见属性justify-content相关推荐

03flex弹性布局父项常见属性总结
技术交流QQ群:1027579432,欢迎你的加入! 1.常见父项属性以下有6个属性是对父元素设置的: flex-direction: 设置主轴的方向 justify-content: 设置主轴上的 ...
Flex布局常用的一些属性及解释
记录一下忘记的时候翻一下父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align- ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。
问题 flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行.(如下图所示) 解决给外层父元素添加 align-content:flex-start 样式解决后: ...
CSS3 Flex布局弹性容器的属性
为了实现对弹性子元素的灵活控制,在弹性容器上定义了相关属性,通过这些属性来控制主轴的方向.子元素溢出后的行为.子元素的对齐方式等.这些属性见表 9‑2: 表 9-2 父元素属性属性说明 flex- ...
Flex布局常用属性简介
flex弹性布局 flex布局与传统布局的区别传统布局: 传统布局,基于盒模型,依赖 display属性 .position属性 .float属性,它对于那些特殊布局非常不方便,比如垂直居中. 兼容 ...
flex布局——flex-direction属性
1.flex布局原理 1)flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设为fl ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
flex布局之flex-direction
一.flex布局的原理 1,flex是"flexible Box"的缩写,意为"弹性布局": 2.当我们为父盒子设为flex布局以后,子元素的float.cle ...

flex布局父项常见属性justify-content

flex布局父项常见属性justify-content相关推荐

最新文章

热门文章