PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > flex容器与项目的常用属性

flex容器与项目的常用属性

残破的蛋蛋
残破的蛋蛋 原创
2020年12月28日 07:59:54 833浏览

flex容器与项目的常用属性

一、认识flex布局

1.使用display:flex声明一个Flex布局,这个容器称为Flex容器,其包含的子元素称为Flex项目

在Flex容器中有几个核心术语

  1. 容器: 使用display:flex属性元素
  2. 项目: 容器的”子元素”
  3. 主轴: 项目排列的轴线
  4. 交叉轴: 与主轴垂直的轴线
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>flex快速实现水平居中和垂直居中</title>
  7. <style>
  8. .box {
  9. width: 15em;
  10. height: 15em;
  11. background-color: lightgreen;
  12. /* 声明一个flex布局 */
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. }
  17. .box .item {
  18. width: 5em;
  19. height: 5em;
  20. background-color: coral;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="box">
  26. <div class="item"></div>
  27. </div>
  28. </body>
  29. </html>
  • 效果图:
    认识flex

2.容器属性

属性 描述
flex-flow 主轴方向与换行方式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上的对齐方式
align-content 项目在多行容器中的对齐方式

创建一个盒模型,声明为flex布局:

  • html代码
  1. <div class="box">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. <div class="item">item6</div>
  8. <div class="item">item7</div>
  9. <div class="item">item8</div>
  10. </div>
  • css样式:
  1. <style>
  2. * {
  3. box-sizing: border-box;
  4. }
  5. .box {
  6. display: flex;
  7. height: 15em;
  8. border: 1px solid #000;
  9. padding: 1em;
  10. margin: 1em;
  11. }
  12. .box .item {
  13. width: 5em;
  14. height: 5em;
  15. background-color: lightcyan;
  16. border: 1px solid #000000;
  17. }
  18. </style>
  • 效果图:
    flex-flow

2.1 弹性项目在主轴上的排列方式

弹性项目在主轴上的排列方式有两种:

1.单行容器

  1. flex-direction: row;

针对上面的样式,可以给.box一个样式:

  1. flex-direction: row;
  2. flex-wrap: nowrap;

以上两行样式的意思是,有一个主轴沿水平方向的flex布局,并且它下面的项目水平排列不换行。效果图就是上述样式,因为默认的是水平排列不换行,这两行样式可以简写成一行:

  1. flex-flow: row nowrap;

2.多行容器

  1. flex-direction: column;
  2. flex-wrap: nowrap;
  • 效果如图:
    column

此时的主轴方向变成垂直方向了,水平方向变成了交叉轴,因此每个项目会沿着主轴垂直排列,如果设置了允许换行:

  1. flex-direction: column;
  2. flex-wrap: wrap;

在一列排不下的时候,会自动换行到第二列,效果如图:
column

上面两行样式代码一样可以简写成:

  1. flex-flow: column nowrap;

2.2 弹性项目在单行容器的对齐方式

  • html:
  1. <div class="box">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. <div class="item">item6</div>
  8. <div class="item">item7</div>
  9. <div class="item">item8</div>
  10. </div>
  • css样式:
  1. <style>
  2. * {
  3. box-sizing: border-box;
  4. }
  5. .box {
  6. display: flex;
  7. height: 15em;
  8. border: 1px solid #000;
  9. padding: 1em;
  10. margin: 1em;
  11. }
  12. .box .item {
  13. width: 5em;
  14. background-color: lightcyan;
  15. border: 1px solid #000000;
  16. }
  17. </style>
  • 效果图:
    flex

设置项目在单行容器主轴上的对齐有个前提:主轴上必须有剩余空间。

项目在主轴上的对齐方案:
1.将所有项目视为一个整体,在项目组两边进行分配

  • 左对齐 justify-content: flex-start;
  • 居中 justify-content: center;
  • 右对齐 justify-content: flex-end;

这三个属性的效果如下图:
对齐方式

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

  • 分散对齐 justify-content: space-around; 每个左右两边的间距相等
  • 两端对齐 justify-content: space-between; 首尾项目顶格,每个项目之间的间距相等
  • 平均对齐 justify-content: space-evenly; 每个项目之间的间距相等

这三个属性的效果如下图:
space

2.2 弹性项目在交叉轴上的排列方式

属性 描述
stretch 默认效果,拉伸到容器的高度
flex-start 弹性项目沿交叉轴顶部对齐
center 弹性项目在容器里沿交叉轴居中
flex-end 弹性项目在交叉轴底部对齐
  1. /* 交叉轴的对齐方案 */
  2. .box {
  3. align-items: stretch;
  4. align-items: flex-start;
  5. align-items: center;
  6. align-items: flex-end;
  7. }
  • 效果图:
    align-items

  • 注意:有一点值得注意的是,如果使用stretch,项目上不要设置高度。

3.项目属性

属性 描述
flex 项目的缩放比例与基准宽度
align-self 单个项目在交叉轴上的对齐方式
order 项目在主轴上排列顺序

现有如下的弹性盒模型:

  • html:
  1. <div class="box">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. </div>
  • css样式:
  1. <style>
  2. * {
  3. box-sizing: border-box;
  4. }
  5. .box {
  6. display: flex;
  7. height: 15em;
  8. border: 1px solid #000;
  9. padding: 1em;
  10. margin: 1em;
  11. }
  12. .box .item {
  13. width: 5em;
  14. background-color: lightcyan;
  15. border: 1px solid #000000;
  16. }
  17. </style>
  • 效果图:
    flex

flex: 放大因子 收缩因子 项目在主轴上的基准宽度
flex: flex-grow flex-shrink flex-basis;

现在在.item项目上加上一个属性flex,有如下样式:

  1. flex: 0 1 auto;

该值是默认效果,效果与上面的效果图一致,还可以写成:

  1. flex: inherit;

允许放大或收缩,禁止放大或收缩

  1. /* 允许放大或收缩 */
  2. flex: 1 1 auto;
  3. /* 禁止放大或收缩 */
  4. flex: 0 0 auto;
  • 效果图:
    flex

禁止放大或收缩还可以写成:

  1. flex: none;

如果只有一个参数,省略后面两个参数,表示放大因子,例如:

  1. flex: 1;

上述的代码等价于:

  1. flex: 1 1 auto;
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议