实例演示flex容器与项目中常用的属性
dispaly:flex
实现了什么?
将元素属性转换为flex弹性盒子,布局更方便简单。
flex项目在主轴上的排列方式
项目在主轴上默认的是行排列,也就是flex-direction:row-reverse
图示:
每个项目都有最小的宽度,当我们宽度不够的时候可以利用flex-wrap
允许换行转为多行容器
图示:
也可以通过flex-direction:row-reverse
来改变主轴的方向为垂直
图示:
而所谓的在主轴上对齐即将所剩的空间在项目之间进行分配
在主轴上左对齐:justify-content:flex-start;
图示:
在主轴上右对齐:justify-content:flex-end;
图示:
在主轴上居中对齐:justify-content:center;
图示:
在主轴上两端对齐:justify-content:space-between;
图示:
在主轴上两端对齐:justify-content:space-around;
(项目之间为两倍空间)
图示:
在主轴上平均对齐:justify-content:space-evenly;
(项目之间空间相等)
图示:
同理,交叉轴上的对齐方式也可以运用align-items:对齐方式;
来进行对齐
以上就是flex项目中常用的一些属性
代码实现:
<!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>flex布局属性
</title>
</head>
<style>
*{
padding: 0;margin: 0;box-sizing: border-box;
/* 初始化网页格式 */
}
:root{
font-size: 10px;
/* 初始化网页字体格式 */
}
body{
font-size: 1.6rem;
/* 还原body中的字体大小 */
}
.ys{
/* 给class为ys的标签添加一个像素的实线边框 */
border:1px solid;
/* 给class为ys的标签添加一个高度 */
height: 50rem;
/* 给class为ys的标签转为flex布局 */
display: flex;
/* 项目在主轴上左对齐 */
justify-content: flex-start;
/* 项目在主轴上右对齐 */
justify-content:flex-end;
/* 项目在主轴上居中对齐 */
justify-content:center;
/* 项目在主轴上两端对齐 */
justify-content:space-between;
/* 项目在主轴上分散对齐 */
justify-content:space-around;
/* 项目在主轴上平均对齐 */
justify-content:space-evenly;
}
.ys .itemes{
width: 10rem;
border:1px solid;
background-color:aquamarine;
}
</style>
<body>
<div class="ys">
<div class="itemes">itemes1</div>
<div class="itemes">itemes2</div>
<div class="itemes">itemes3</div>
<div class="itemes">itemes4</div>
</div>
</body>
</html>