Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex 容器与项目
Blogger Information
Blog 26
fans 0
comment 0
visits 21516
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex 容器与项目
default
Original
947 people have browsed it

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.       .container{
  8.           width: 500px;
  9.           height: 400px;
  10.           display: flex;
  11.       }
  12.       .item{
  13.          width: 50px;
  14.          height: 50px;
  15.          background: gray;
  16.       }
  17.       .item:nth-of-type(1){
  18.          background: lavenderblush;
  19.       }
  20.       .item:nth-of-type(2){
  21.          background: lightblue;
  22.       }
  23.       .item:nth-of-type(3){
  24.          background: lightcoral;
  25.       }
  26.       .item:nth-of-type(4){
  27.         background: lightgreen;
  28.       }
  29.       .item:nth-of-type(5){
  30.           background: lightyellow;
  31.       }
  32.     </style>
  33. </head>
  34. <body>
  35. <div class="container">
  36.     <div class="item">1</div>
  37.     <div class="item">2</div>
  38.     <div class="item">3</div>
  39.     <div class="item">4</div>
  40.     <div class="item">5</div>
  41. </div>
  42. </body>
  43. </html>
  • 他的默认为横向排列

    容器的主轴排列有四个属性

    1. /*默认横向排列*/
    2. flex-direction: row;
    3. /*反向横向排列*/
    4. flex-direction: row-reverse;
    5. /*默认纵向排列*/
    6. flex-direction: column;
    7. /*反向纵向排列*/
    8. flex-direction: column-reverse;
  • 默认横向排列flex-direction: row;
  • 反向横向排列
  • 默认纵向排列 flex-direction: column;
  • 反向纵向排列flex-direction: column-reverse;

flex-direction: 分开意思就是 flex 是盒子 direction 是方向 含义为盒子方向

单行与换行

  1. /* 默认不换行显示,如果当前容器容纳不小, 项目会自动收缩 */
  2. flex-wrap: nowrap;
  3. /* 如果允许换行, 当前行容纳不小的项目会拆行显示,此时,创建的容器叫:多行容器 */
  4. flex-wrap: wrap;
  • flex-wrap: wrap; 这个是允许换行 当子元素的宽度大于父元素的宽度时 他就会换行
  • flex-wrap: nowrap; 不允许换行 如果子元素的宽度大于父元素宽度时 子元素会按照比例缩小子元素的宽度 并撑满父元素

    主轴项目对齐方式·

    1. /* 默认，所有项目与主轴的起始线对齐 */
    2. justify-content: flex-start;
    3. /* 所有项目与主轴的结束线对齐 */
    4. justify-content: flex-end;
    5. /* 所有项目居中对齐 */
    6. justify-content: center;
    7. /* 两端对齐 */
    8. justify-content: space-between;
    9. /* 分散对齐 */
    10. justify-content: space-around;
    11. /* 平均对齐 */
    12. justify-content: space-evenly;
  • justify-content: center; 居中对齐 左边边距和右边边距相同
  • justify-content: space-between; 两端对齐 两边没有边距 空白部分的宽度会分成相等的份 分到子元素中间并对齐
  • justify-content: space-around; 分散对齐 每个子元素左右都获得相等的空白部分并对齐
  • justify-content: space-evenly; 平均对齐 每个子元素都的空白部分变成相等部分并对其

    交叉轴项目对齐方式

    1. align-items: flex-start;
    2. align-items: flex-end;
    3. align-items: center;
  • align-items: flex-start;当父元素的高度没有被撑满 有空余高度的时候 纵向排列在起始位 这个和justify-content: flex-start;没什么区别 暂时不举例
  • align-items: flex-end;当父元素的高度没有被撑满 有空余高度的时候 纵向排列在结束位 他会落下来 跑到最底下

  • align-items: center; 当父元素的高度没有被撑满 有空余高度的时候 纵向排列在结束位当父元素的高度没有被撑满 有空余高度的时候 纵向排列居中 高度的居中 有点像文字处理时候的text-align

    交叉轴项目对齐方式 /纵向对齐方式

    1. /* 自动拉伸：默认 */
    2. align-content: stretch;
    3. /* 纵向排列起始位：默认 */
    4. align-content: flex-start;
    5. /*纵向排列结束位*/
    6. align-content: flex-end;
    7. /*纵向排列居中*/
    8. align-content: center;
    9. /*纵向排列两端对齐*/
    10. align-content: space-between;
    11. /*纵向排列分散对齐*/
    12. align-content: space-around;
    13. /*纵向排列平均对齐*/
    14. align-content: space-evenly;
  • align-content: stretch; align-content: flex-start; align-content: flex-end; align-content: center;和横向排列一样
  • align-content: space-between; /纵向排列两端对齐/
  • align-content: space-around; 分散对齐
  • align-content: space-evenly; 平均对齐

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

flex-flow属性

  • flex-flow是属性flex-direction和flex-wrap的简写
  • 语法: flex-flow: flex-direction flex-wrap
属性值 描述
row nowrap默认值 主轴水平, 项目不换行
row wrap默认值 反向横向排列, 项目换行
column nowrap默认值 纵向排列, 项目换行
column-reverse wrap默认值 反向纵向排列 , 项目换行
这个简写很好用长期会用

操纵子元素

子元素的排序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.       .container{
  8.           width: 500px;
  9.           height: 400px;
  10.           display: flex;
  11.           flex-flow: row wrap ;
  12.       }
  13.       .item{
  14.          width: 50px;
  15.          height: 50px;
  16.          background: gray;
  17.           /*权重越高 排的越靠前*/
  18.           order: 0;
  19.       }
  20.       .item:nth-of-type(1){
  21.          background: lavenderblush;
  22.           order:5;
  23.       }
  24.       .item:nth-of-type(2){
  25.          background: lightblue;
  26.           order: 4;
  27.       }
  28.       .item:nth-of-type(3){
  29.          background: lightcoral;
  30.           order: 3;
  31.       }
  32.       .item:nth-of-type(4){
  33.         background: lightgreen;
  34.           order: 2;
  35.       }
  36.       .item:nth-of-type(5){
  37.           background: lightyellow;
  38.           order: 1;
  39.       }
  41.     </style>
  42. </head>
  43. <body>
  44. <div class="container">
  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 class="item">5</div>
  51. </div>
  52. </body>
  53. </html>

flex 子元素交叉轴单独对齐

  • align-self该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)


-因为改了纵向排列 baseline的效果能出来 不然还是和默认一样

项目放大因子和缩小因子

  • flex-grow: 0; 值为0的时候 不放大
  • flex-shrink: 0;值为0的时候 不缩小 当父元素比子元素小的时候用

项目计算尺寸

  1.  /* auto === width */
  2.  flex-basis: auto;
  3.  /* flex-basis: 权重大于width; */
  4.  flex-basis: 70px;
  5.  flex-basis: 20%;
  6.  flex-basis: 5rem;
  7.  /* min-width / max-width 权重大于flex-basis; */
  8.  max-width: 100px;
  9. flex-basis: 150px;
  10. /* width < flex-basis < min/max-width; 1权重大小排比 */

flex 项目缩放的简写

1. flex属性

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

1.1 三值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
2 第二个值: 整数 flex-shrink
3 第三个值: 有效宽度 flex-basis

举例:

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

1.2 双值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
3 第二个值: 有效宽度 flex-basis

举例:

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

1.3 单值语法

序号 属性值 描述
1 整数 flex-grow
2 有效宽度 flex-basis
3 关键字 `initial auto none`

举例:

序号 案例 描述
1 flex: 1 flex: 1 1 auto
2 flex: 180px flex: 1 1 180px
3 initial flex: 0 1 auto
4 auto flex: 1 1 auto
5 none flex: 0 0 auto

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：效果图不错, 火狐浏览器对这个特别友好, 一定要学会调试和查看效果
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post