Flex布局随笔
Posted 449house
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flex布局随笔相关的知识，希望对你有一定的参考价值。
常用语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ height: 500px; width: 1000px; border: 1px solid; display: flex; /* flex-direction属性决定主轴的方向(即项目的排列方向) */ /* flex-direction: row; */ /* 默认从左到右 */ /* flex-direction: row-reverse; */ /* 从右到左 */ /* flex-direction: column; */ /* 从上到下 */ /* flex-direction: column-reverse; */ /* 从下到上 */ /* flex-wrap属性定义在一条轴线上排不下的时候换行 */ /* flex-wrap: wrap; */ /* 换行 */ /* flex-wrap: wrap-reverse; */ /* 换行 上面行变第下面行*/ /* flex-flow: column wrap; */ /* 上面排序和换行方法的简写形式 */ /* justify-content属性定义了项目在主轴上的对齐方式 */ /* justify-content: center; */ /* 在x轴对齐方式：居中 */ /* justify-content: flex-end; */ /* 在x轴对齐方式：右对齐 默认左对齐Start*/ /* justify-content: space-between; */ /* 在x轴对齐方式：两端对齐 中间间隔相等 */ /* justify-content: space-around; */ /* 在x轴对齐方式：每个元素间隔相等 */ /* align-items属性定义项目在交叉轴上如何对齐 */ /* align-items: flex-start; */ /* xy交叉轴的起点对齐*/ /* align-items: flex-end; */ /* xy交叉轴的终点对齐*/ /* align-items: center; */ /* xy交叉轴的中点(Y轴)对齐 */ /* align-items: baseline; */ /* 项目的第一行文字的基线对齐 */ /* align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用 */ /* align-content: flex-start; */ /* 与交叉轴的起点对齐。 */ /* align-content: flex-end; */ /* 与交叉轴的终点对齐 */ /* align-content: center; */ /* 与交叉轴中点对齐 */ /* align-content: space-between; */ /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */ /* align-content: space-around; */ /* 每根轴线两侧间隔都相等。 */ } img{ width: 300px; height: 100px; } </style> </head> <body> <div class="box"> <img src="img/book-login-xxl.png" style="background-color: aqua;">文字 <img src="img/book-login-xxl.png" >文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 <img src="img/book-login-xxl.png" style="background-color: cadetblue;">文字 </div> </body> </html>
以上是关于Flex布局随笔的主要内容，如果未能解决你的问题，请参考以下文章