实例演示flex容器与项目中常用的属性

实例演示flex容器与项目中常用的属性

  1. 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项目中常用的一些属性
代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>flex布局属性
  8. </title>
  9. </head>
  10. <style>
  11. *{
  12. padding: 0;margin: 0;box-sizing: border-box;
  13. /* 初始化网页格式 */
  14. }
  15. :root{
  16. font-size: 10px;
  17. /* 初始化网页字体格式 */
  18. }
  19. body{
  20. font-size: 1.6rem;
  21. /* 还原body中的字体大小 */
  22. }
  23. .ys{
  24. /* 给class为ys的标签添加一个像素的实线边框 */
  25. border:1px solid;
  26. /* 给class为ys的标签添加一个高度 */
  27. height: 50rem;
  28. /* 给class为ys的标签转为flex布局 */
  29. display: flex;
  30. /* 项目在主轴上左对齐 */
  31. justify-content: flex-start;
  32. /* 项目在主轴上右对齐 */
  33. justify-content:flex-end;
  34. /* 项目在主轴上居中对齐 */
  35. justify-content:center;
  36. /* 项目在主轴上两端对齐 */
  37. justify-content:space-between;
  38. /* 项目在主轴上分散对齐 */
  39. justify-content:space-around;
  40. /* 项目在主轴上平均对齐 */
  41. justify-content:space-evenly;
  42. }
  43. .ys .itemes{
  44. width: 10rem;
  45. border:1px solid;
  46. background-color:aquamarine;
  47. }
  48. </style>
  49. <body>
  50. <div class="ys">
  51. <div class="itemes">itemes1</div>
  52. <div class="itemes">itemes2</div>
  53. <div class="itemes">itemes3</div>
  54. <div class="itemes">itemes4</div>
  55. </div>
  56. </body>
  57. </html>