欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flex弹性盒元素介绍和实例

程序员文章站 2022-04-08 18:33:33
...

1,什么是Flex

  1. 任何元素都可以通过添加display: flex属性,转为弹性盒元素称之为容器
  2. 转为flex元素后,它的内部的”子元素”就支持flex布局了,称之为项目
  3. 主轴: 项目排列的轴线,水平方向
  4. 交叉轴: 与主轴垂直的轴线
  5. Flex作用于父子级关系,其他后代无作用.
  6. 设为 Flex 布局以后,子元素的float、clear属性将失效。

2. 容器属性

属性 说明 默认值
flex-flow 主轴方向与换行方式, 水平排列,不换行. row nowrap
justify-content 定义项目在主轴上的对齐方式。 左对齐 justify-start
align-items 定义项目在交叉轴上的对齐方式. 未设置高度或auto,将占满整个容器的高度。stretch
align-content 定义项目在多行容器中的对齐方式. 轴线占满整个交叉轴。stretch

justify-content的使用

1. 将所有项目视为一个整体,在项目组二边进行分配

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

2. 将项目视为一个个独立的个体,在项目之间进行分配

二端对齐justify-content: space-between;

分散对齐justify-content: space-around;

平均对齐justify-content: space-evenly;

html代码

  1. <h2>flex-start</h2>
  2. <div class="box">
  3. <div>1</div>
  4. <div>2</div>
  5. <div>3</div>
  6. <div>4</div>
  7. </div>
  8. <h2>flex-end</h2>
  9. <div class="box">
  10. <div>1</div>
  11. <div>2</div>
  12. <div>3</div>
  13. <div>4</div>
  14. </div>
  15. <h2>center</h2>
  16. <div class="box">
  17. <div>1</div>
  18. <div>2</div>
  19. <div>3</div>
  20. <div>4</div>
  21. </div>
  22. <h2>space-between; 二端对齐</h2>
  23. <div class="box">
  24. <div>1</div>
  25. <div>2</div>
  26. <div>3</div>
  27. <div>4</div>
  28. </div>
  29. <h2>space-around; 分散对齐</h2>
  30. <div class="box">
  31. <div>1</div>
  32. <div>2</div>
  33. <div>3</div>
  34. <div>4</div>
  35. </div>
  36. <h2>space-evenly; 平均对齐</h2>
  37. <div class="box">
  38. <div>1</div>
  39. <div>2</div>
  40. <div>3</div>
  41. <div>4</div>
  42. </div>

css代码

  1. <style>
  2. * {
  3. box-sizing: border-box;
  4. }
  5. div.box {
  6. background-color: violet;
  7. display: flex;
  8. margin: 1em;
  9. min-height: 4em;
  10. }
  11. h2 {
  12. color: violet;
  13. font-size: 1.25em;
  14. }
  15. .box div {
  16. background-color: lightcyan;
  17. margin: 1em;
  18. width: 5em;
  19. height: 2em;
  20. }
  21. .box:nth-of-type(1) {
  22. justify-content: flex-start;
  23. }
  24. .box:nth-of-type(2) {
  25. justify-content: flex-end;
  26. }
  27. .box:nth-of-type(3) {
  28. justify-content: center;
  29. }
  30. .box:nth-of-type(4) {
  31. justify-content: space-around;
  32. }
  33. .box:nth-of-type(5) {
  34. justify-content: space-between;
  35. }
  36. .box:nth-of-type(6) {
  37. justify-content: space-evenly;
  38. }
  39. </style>

Flex弹性盒元素介绍和实例

align-items的使用

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch;
Flex弹性盒元素介绍和实例

align-content的使用

align-content: flex-start;

lign-content: flex-end;

align-content: center;

二端对齐align-content: space-between;

分散对齐align-content: space-around;

平均对齐align-content: space-evenly;
Flex弹性盒元素介绍和实例

3. 项目的属性

属性 说明
order 排列顺序,数值越小,排列越靠前,默认为0。
flex 通常用来设置某一个项目的特征 默认flex: 0 1 auto;不放大可缩小
align-self 某个项目的对齐方式

align-self 如下图实例

align-self:flex-start;

Flex弹性盒元素介绍和实例

align-self:center;

Flex弹性盒元素介绍和实例

align-self:flex-end;

Flex弹性盒元素介绍和实例

order 如下图实例

第三个项目显示到第一个窗口

Flex弹性盒元素介绍和实例

flex 如下图实例

第三个项目是1,2,3项目的2倍大小

Flex弹性盒元素介绍和实例