实例演示flex容器与项目中常用的属性
16lz
2021-07-11
实例演示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>
更多相关文章
- flex容器与项目中常用的属性
- flex容器
- CentOS 7 中英文桌面安装步骤详细图解
- flex 容器的 flex-flow, justify-content, align-items, align-c
- 第五课 实例演示flex容器中的四个属性的功能，参数，以及作用
- CSS：flex布局理解及实例演示flex容器中的四个属性的功能、参数、
- flex基础：flex容器中的四个属性的功能，参数，以及作用
- flex容器常用的四个属性
- flex项目属性，实战案例。