search

博客列表 >弹性盒子flex在项目样式举例

弹性盒子flex在项目样式举例

，多思曩惜，
，多思曩惜，原创
2020年04月19日 21:17:31719浏览

flex布局概述

1.flex是什么

  • flex是Flexible box的缩写，意为弹性布局
  • flex 2009 年就已出现，浏览器兼容性很好。

2.flex 解决了什么问题

  • 块元素的垂直居中，flex 可以轻松解决
  • 元素大小在容器中的自动伸缩，以适应容器的变化，特别适合移动端布局

—

3.flex 项目的布局方向是什么

  • 一个物体在平面中，要么水平排列，要么垂直排列，flex 借鉴了这个思维
  • flex 是一维布局，项目任何时候只能沿一个方向排列，要么水平，要么垂直
  • flex 项目排列的方向，称为主轴，水平和垂直俩种
  • 与主轴垂直的称为交叉轴

4.flex布局中常用术语有哪些

简记 术语
二成员 容器和项目（container/item）
二根轴 主轴与交叉轴（main-axis/cross-axis）
二根线 起始线与结束线（flex-start/flex-end）}

5.flex 容器属性有哪些

属性 描述
flex-direction 设置容器的主轴方向：行/水平方向，列/垂直方向
flex-wrap 是否允许创建多行容器，即flex项目一列排列不下时，是否允许换行
flex-flow 简化flex-direction,flex-wrap属性
justify-content 设置flex项目在主轴上对齐方式
align-items 设置flex项目在交叉轴对齐方式
align-content 多行容器中，项目在交叉轴上的对齐方式

6.flex项目的属性有哪些

属性 描述
flex-basis 项目宽度：项目分配主轴剩余空间之前，项目所占据的主轴空间宽度
flex-grow 项目的宽度扩展：将主轴上的剩余空间按比例分配给指定项目
flex-shrink 项目的宽度收缩：将项目上多出空间按比例在项目间进行缩减
flex 上上面三个属性的简写：flex:flex-grow flex-shrink flex-basis
align-self 单独定义某个项目在交叉轴上的对齐方式
order 自定义项目在主轴上的排列顺序，默认为 0，书写顺序，值越小位置越靠前

flex 容器与项目

1.display属性

属性值 描述 备注
flex; 创建flex块级容器 内容字元素自动成为flex项目
inline-flex 创建flex行内容器 内容子元素自动成为flex项目

2.flex 容器与项目特征

容器/项目 默认行为
容器主轴 水平方向
项目排列 沿主轴起始线排列（当前起始线居左）
项目类型 自动转换‘行内块级’元素，不管值钱的是什么类型
容器主轴空间不足时 项目自动收缩尺寸以适应空间变化，不会换行显示
容器主轴存在未分配空间时 项目保持自身大小不会放大并充满空间 
  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>Document</title>
  7.   <style>
  8.     .container {
  9.       height: 150px;
  10.       background-color: darkcyan;
  11.     }
  12.     .item {
  13.       width: 100px;
  14.       height: 50px;
  15.       background-color: cyan;
  16.       font-size: 1.5rem;
  17.     }
  18.   </style>
  19. </head>
  20. <body>
  21.   <div class="container">
  22.     <div class="item">1</div>
  23.     <div class="item">2</div>
  24.     <div class="item">3</div>
  25.     <div class="item">4</div>
  26.   </div>
  27. </body>
  28. </html>
  • 预览效果
  • 当添加.container{display:flex;}样式时。效果图
  • 当注释.container{display:flex;}添加.container{display:inline-flex;}样式时。效果图

flex 容器主轴方向

1.flex-direction属性

属性值 描述
row默认值 主轴水平：起始线居中，项目从左到右显示
row-reverse 主轴水平：起始线居右，项目从右向左显示
column 主轴垂直：起始线居上，项目从上向下显示
column-reverse 主轴垂直：起始线居下，项目从下向上显示 
  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>Document</title>
  7.   <style>
  8.     .container {
  9.       height: 250px;
  10.       background-color: darkcyan;
  11.     }
  12.     .container {
  13.       display: flex;
  14.     }
  15.     .item {
  16.       width: 100px;
  17.       height: 50px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.   </style>
  22. </head>
  23. <body>
  24.   <div class="container">
  25.     <div class="item">1</div>
  26.     <div class="item">2</div>
  27.     <div class="item">3</div>
  28.     <div class="item">4</div>
  29.   </div>
  30. </body>
  31. </html>

-效果预览

  • 当添加.container{flex-direction：row-reverse；}
  • 当添加.container{flex-direction：column；}
  • 当添加.container{flex-direction：column-reverse；}

flex 容器主轴项目换行

1.flex-wrap属性

属性值 描述
nowrap默认值 项目不换行：单行容器
wrap 项目换行：多行容器，第一行在上方
wrap-reverse 项目换行：多行容器，第一行在下方 
  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>Document</title>
  7.   <style>
  8.     .container1 {
  9.       width: 300px;
  10.       height: 200px;
  11.       background-color: wheat;
  12.       display: flex;
  13.       flex-direction: row;
  14.       /* 默认不换行，若当前容器容纳不下，项目会自动收缩 */
  15.       flex-wrap: nowrap;
  16.       /* 换行显示，当前行容纳不下的项目会拆行显示 */
  17.     }
  18.     .container2 {
  19.       width: 300px;
  20.       height: 200px;
  21.       background-color: wheat;
  22.       display: flex;
  23.       flex-direction: row;
  24.       flex-wrap: wrap;
  25.     }
  26.     .container3 {
  27.       width: 300px;
  28.       height: 200px;
  29.       background-color: wheat;
  30.       display: flex;
  31.       flex-direction: row;
  32.       flex-wrap: wrap-reverse;
  33.     }
  34.     .item {
  35.       width: 100px;
  36.       height: 50px;
  37.       background-color: cyan;
  38.       font-size: 1.5rem;
  39.     }
  40.   </style>
  41. </head>
  42. <body>
  43.   <div class="container">
  44.     <div class="container1">
  45.       <div class="item">1</div>
  46.       <div class="item">2</div>
  47.       <div class="item">3</div>
  48.       <div class="item">4</div>
  49.     </div>
  50.     <br>
  51.     <div class="container2">
  52.       <div class="item">1</div>
  53.       <div class="item">2</div>
  54.       <div class="item">3</div>
  55.       <div class="item">4</div>
  56.     </div>
  57.     <br>
  58.     <div class="container3">
  59.       <div class="item">1</div>
  60.       <div class="item">2</div>
  61.       <div class="item">3</div>
  62.       <div class="item">4</div>
  63.     </div>
  64.   </div>
  65. </body>
  66. </html>
  • 预览效果

flex 容器主轴与项目换行简写

1. flex-flow属性

  • flex-flow是属性flex-direction和flex-wrap的简写
    -语法: flex-flow：flex-direction flex-wrap
  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>Document</title>
  7.   <style>
  8.     .container1 {
  9.       width: 150px;
  10.       height: 150px;
  11.       background-color: wheat;
  12.       display: flex;
  13.       flex-flow: row nowrap;
  14.     }
  15.     .container2 {
  16.       width: 200px;
  17.       height: 150px;
  18.       background-color: wheat;
  19.       display: flex;
  20.       flex-flow: row wrap;
  21.     }
  22.     .container3 {
  23.       width: 200px;
  24.       height: 110px;
  25.       background-color: wheat;
  26.       display: flex;
  27.       flex-flow: column nowrap;
  28.     }
  29.     .container4 {
  30.       width: 200px;
  31.       height: 150px;
  32.       background-color: wheat;
  33.       display: flex;
  34.       flex-flow: column wrap;
  35.     }
  36.     .item {
  37.       width: 80px;
  38.       height: 40px;
  39.       background-color: cyan;
  40.       font-size: 1.1rem;
  41.     }
  42.   </style>
  43. </head>
  44. <body>
  45.   <div class="container">
  46.     <span>container1</span>
  47.     <div class="container1">
  48.       <div class="item">1</div>
  49.       <div class="item">2</div>
  50.       <div class="item">3</div>
  51.       <div class="item">4</div>
  52.     </div>
  53.     <br>
  54.     <div class="container2">
  55.       <div class="item">1</div>
  56.       <div class="item">2</div>
  57.       <div class="item">3</div>
  58.       <div class="item">4</div>
  59.     </div>
  60.     <br>
  61.     <div class="container3">
  62.       <div class="item">1</div>
  63.       <div class="item">2</div>
  64.       <div class="item">3</div>
  65.       <div class="item">4</div>
  66.     </div>
  67.     <br>
  68.     <div class="container4">
  69.       <div class="item">1</div>
  70.       <div class="item">2</div>
  71.       <div class="item">3</div>
  72.       <div class="item">4</div>
  73.     </div>
  74.   </div>
  75. </body>
  76. </html>
  • 预览效果

flex 容器主轴项目对齐

1.justify-content属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

属性值 描述
flex-start默认 所有项目与主轴起始线对齐
flex-end 所有项目与主轴终止线对齐
center 所有项目与主轴中间线对齐：居中对齐
space-between 俩端对齐：剩余空间在头尾项目之外的项目平均分配
space-around 分散对齐：剩余空间在每个项目二测平均分配
space-evenly 平均对齐：剩余空间在每个项目之间平均分配 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .container {
  10.       display: grid;
  11.       grid-auto-flow: row;
  12.       grid-template-columns: 300px 300px 300px;
  13.       grid-template-rows: 150px 150px 150px;
  14.     }
  16.     .container1 {
  17.       width: 300px;
  18.       height: 150px;
  19.       background-color: wheat;
  20.       display: flex;
  21.       justify-content: flex-start;
  22.       /* justify-content: flex-end; */
  23.     }
  25.     .container2 {
  26.       width: 300px;
  27.       height: 150px;
  28.       background-color: wheat;
  29.       display: flex;
  30.       justify-content: flex-end;
  31.     }
  33.     .container3 {
  34.       width: 300px;
  35.       height: 150px;
  36.       background-color: wheat;
  37.       display: flex;
  38.       justify-content: center;
  39.     }
  41.     .container4 {
  42.       width: 300px;
  43.       height: 150px;
  44.       background-color: wheat;
  45.       display: flex;
  46.       justify-content: space-between;
  47.     }
  49.     .container5 {
  50.       width: 300px;
  51.       height: 150px;
  52.       background-color: wheat;
  53.       display: flex;
  54.       justify-content: space-around;
  55.     }
  57.     .container6 {
  58.       width: 300px;
  59.       height: 150px;
  60.       background-color: wheat;
  61.       display: flex;
  62.       justify-content: space-evenly;
  63.     }
  65.     .item {
  66.       width: 50px;
  67.       height: 40px;
  68.       background-color: cyan;
  69.       font-size: 1.1rem;
  70.     }
  71.   </style>
  72. </head>
  74. <body>
  75.   <div class="container">
  76.     <div class="container1">
  77.       <div class="item">1</div>
  78.       <div class="item">2</div>
  79.       <div class="item">3</div>
  80.       <div class="item">4</div>
  81.     </div>
  82.     <br>
  83.     <div class="container2">
  84.       <div class="item">1</div>
  85.       <div class="item">2</div>
  86.       <div class="item">3</div>
  87.       <div class="item">4</div>
  88.     </div>
  89.     <br>
  90.     <div class="container3">
  91.       <div class="item">1</div>
  92.       <div class="item">2</div>
  93.       <div class="item">3</div>
  94.       <div class="item">4</div>
  95.     </div>
  96.     <br>
  97.     <div class="container4">
  98.       <div class="item">1</div>
  99.       <div class="item">2</div>
  100.       <div class="item">3</div>
  101.       <div class="item">4</div>
  102.     </div>
  103.     <br>
  104.     <div class="container5">
  105.       <div class="item">1</div>
  106.       <div class="item">2</div>
  107.       <div class="item">3</div>
  108.       <div class="item">4</div>
  109.     </div>
  110.     <br>
  111.     <div class="container6">
  112.       <div class="item">1</div>
  113.       <div class="item">2</div>
  114.       <div class="item">3</div>
  115.       <div class="item">4</div>
  116.     </div>
  117.   </div>
  118. </body>
  119. </html>
  • 预览效果

flex 容器交叉轴项目对齐

1.align-items属性

  • 该属性仅适用于: 单行容器
  • 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
属性值 描述
flex-start默认 与交叉轴起始线对齐
flex-end 与交叉轴终止线对齐
center 与交叉轴中间线对齐: 居中对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.   .container1 {
  10.       width: 300px;
  11.       height: 150px;
  12.       background-color: wheat;
  13.       display: flex;
  14.       align-items: flex-start;
  15.     }
  16.     .container2 {
  17.       width: 300px;
  18.       height: 150px;
  19.       background-color: wheat;
  20.       display: flex;
  21.       align-items: flex-end;
  22.     }
  23.     .container3 {
  24.       width: 300px;
  25.       height: 150px;
  26.       background-color: wheat;
  27.       display: flex;
  28.       align-items: center;
  29.     }
  30.     .item {
  31.       width: 50px;
  32.       height: 40px;
  33.       background-color: cyan;
  34.       font-size: 1.1rem;
  35.     }
  36.   </style>
  37. </head>
  39. <body>
  40.   <div class="container">
  41.     <div class="container1">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.       <div class="item">4</div>
  46.     </div>
  47.     <br>
  48.     <div class="container2">
  49.       <div class="item">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  52.       <div class="item">4</div>
  53.     </div>
  54.     <br>
  55.     <div class="container3">
  56.       <div class="item">1</div>
  57.       <div class="item">2</div>
  58.       <div class="item">3</div>
  59.       <div class="item">4</div>
  60.     </div>
  61.   </div>
  62. </body>
  63. </html>
  • 预览效果

flex 多行容器交叉轴项目对齐

1.align-content属性

  • 该属性仅适用于: 多行容器
  • 多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义
属性值 描述
stretch默认 项目拉伸占据整个交叉
flex-start 所有项目与交叉轴起始线（顶部）对齐
flex-end 所有项目与交叉轴终止线对齐
center 所有项目与交叉轴中间线对齐：居中对齐
space-between 俩端对齐：剩余空间在头尾项目之外的项目间平均分配
space-around 分散对齐: 剩余空间在每个项目二侧平均分配
space-evenly 平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

  • 部分样式

    1. <style>
    2.   .container {
    3.     display: grid;
    4.     grid-auto-flow: row;
    5.     grid-template-columns: 300px 300px 300px;
    6.     grid-template-rows: 150px 150px 150px;
    7.   }
    8.   .container1 {
    9.     width: 300px;
    10.     height: 150px;
    11.     background-color: wheat;
    12.     display: flex;
    13.     flex-flow: row wrap;
    14.     align-content: stretch;
    15.   }
    16.     .item {
    17.     width: 80px;
    18.     height: 40px;
    19.     background-color: cyan;
    20.     font-size: 1.1rem;
    21.   }
    22. </style>

  • 预览

flex 项目的顺序排列

1.order属性

  • order 属性 设置或检索弹性盒模型对象的子元素出现的順序
  • 注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。
值 描述
number 默认值是0，规定灵活项目的顺序
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性

flex 项目交叉轴单独对齐

1.align-self属性

  • 该属性可覆盖容器的align-items，用以自定义某个项目的对齐方式
属性 描述
auto默认值 继承align-items属性值
flex-start 与交叉轴起始线对齐
flex-end 与交叉轴终止线对齐
center 与交叉轴中间线对齐:居中对齐
stretch 在交叉轴方向上拉伸
baseline 与基线对齐（与内容相关用得极少) 
  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>Document</title>
  7.   <style>
  8.     .container1 {
  9.       width: 300px;
  10.       height: 150px;
  11.       background-color: wheat;
  12.       display: flex;
  13.       align-self: auto;
  14.       /* align-items: center; */
  15.     }
  16.     .container1>.item:first-of-type {
  17.       height: inherit;
  18.       background-color: yellow;
  19.        /* align-self: 会覆盖掉父项目中的align-items; */
  20.       align-self: stretch;
  21.     }
  22.     .container1>.item:nth-of-type(2) {
  23.       background-color: lightcoral;
  24.       align-self: flex-start;
  25.     }
  26.     .container1>.item:nth-of-type(3) {
  27.       background-color: lightcoral;
  28.       align-self: flex-end;
  29.     }
  30.     .container1>.item:last-of-type {
  31.       align-self: center;
  32.     }
  33.     .item {
  34.       width: 80px;
  35.       height: 40px;
  36.       background-color: cyan;
  37.       font-size: 1.1rem;
  38.     }
  39.   </style>
  40. </head>
  41. <body>
  42.   <div class="container">
  43.     <div class="container1">
  44.       <div class="item">1</div>
  45.       <div class="item">2</div>
  46.       <div class="item">3</div>
  47.       <div class="item">4</div>
  48.     </div>
  49.   </div>
  50. </body>
  51. </html>
  • 效果图

flex 项目放大因子\收缩因子

1.flex-grow属性

  • 在容器主轴上存在剩余空间时，flex-grow才有意义
  • 该属性的值，称为放大因子，常见的属性值如下：
属性值 描述
0默认值 不放大，保持初始值
initial 设置默认值，与0等效
n 放大因子：正数

2.flex-shrink属性

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
属性值 描述
1默认值 允许项目收缩
initial 设置默认值，与1等效
0 禁止收缩，保持原始尺寸
n 放大因子：正数 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .container {
  10.       display: flex;
  11.     }
  12.     .container1 {
  13.       width: 300px;
  14.       height: 150px;
  15.       background-color: wheat;
  16.       display: flex;
  17.       /* flex-grow: inherit; */
  18.     }
  19.     .container1>.item:first-of-type {
  20.       background-color: yellow;
  21.       flex-grow: 0;
  22.     }
  23.     .container1>.item:nth-of-type(2) {
  24.       background-color: lightcoral;
  25.       flex-grow: 1;
  27.     }
  28.     .container1>.item:nth-of-type(3) {
  29.       background-color: lightgray;
  30.       flex-grow: 3;
  31.     }
  32.     .container2 {
  33.       width: 150px;
  34.       height: 150px;
  35.       background-color: wheat;
  36.       display: flex;
  37.       flex-flow: row nowrap;
  38.       margin-left: 50px;
  39.       flex-shrink: 0;
  40.     }
  41.     .container2>.item:first-of-type {
  42.       background-color: yellow;
  43.       flex-shrink: 0;
  44.     }
  45.     .container2>.item:nth-of-type(2) {
  46.       background-color: lightcoral;
  47.       flex-shrink: 1;
  49.     }
  50.     .container2>.item:nth-of-type(3) {
  51.       background-color: lightgray;
  52.       flex-shrink: 3;
  53.     }
  54.     .item {
  55.       width: 80px;
  56.       height: 40px;
  57.       background-color: cyan;
  58.       font-size: 1.1rem;
  59.     }
  60.   </style>
  61. </head>
  62. <body>
  63.   <div class="container">
  64.     <div class="container1">
  65.       <div class="item">1</div>
  66.       <div class="item">2</div>
  67.       <div class="item">3</div>
  68.     </div>
  69.     <div class="container2">
  70.       <div class="item">1</div>
  71.       <div class="item">2</div>
  72.       <div class="item">3</div>
  73.     </div>
  74.   </div>
  75. </body>
  76. </html>
  • 预览效果

flex 项目计算尺寸

1.flex-basis属性

  • 在分配多余空间之前,项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小(width/height)
  • 该属性会被项目的min-width/min-height值覆盖
属性 描述
auto 默认值：项目原来大小
px 像素
& 百分比

优先级: 项目大小 < flex-basis < min-width/height

flex 项目缩放的简写

1.flex属性

  • 项目放大，缩写与计算尺寸，对于项目非常重要，也很常用
  • 每次都要写三个属性，非常麻烦，且没有必要
  • flex属性，可以将以上三个属性进行简化：
  • 语法：flex:flex-grow flex-shrink flex-basis

1.1 三值语法

|属性值|描述|
|第一个值：整数|flex-grow|
|第二个值：整数|flex-shrink|
|第三个值：有效宽度|flex-basis|

  • 举例
案例 描述
flex: 0 1 auto 默认值：不放大，可收缩，初始宽度
flex: 1 1 auto 项目自动放大或收缩适应容器
flex: 0 0 100px 按计算大小填充到容器中

1.2双值语法

属性值 描述
第一个值：整数 flex-grow
第二个值：有效宽度 flex-basis
  • 举例

|案例|描述|
|flex:0 180px|禁止放大。按计算大小填充到容器中|

1.3单值语法

属性值 描述
整数 flex-grow
有效宽度 flex-basis
关键字 initial、auto、none
  • 举例
案例 描述
flex:1 flex:1 1 auto
flex:180px flex:1 1 180px
initial flex:0 1 auto
auto flex:1 1 auto
none flex:0 0 auto

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

总结

  • 创建弹性盒子，flex中各种样式选择了解，项目在容器布局中的布局样式，
上一条：grid布局下一条：grid布局主要用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多