微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 什么是flex布局，它的常用属性有哪些
博主信息
博文 16
粉丝 0
评论 0
访问量 22613
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
什么是flex布局，它的常用属性有哪些
刚哥哥
原创
4063人浏览过

什么是flex 布局；

flex是 flexible box 的缩写，就是弹性布局的意思。

任何一个元素（块元素、行内块元素、行内元素），都可以设置为弹性盒子属性。

语法：块元素： display:flex; 行内元素：display:inline-flex;

注意：webkit 内核的浏览器，须要加上 -webkit 前缀；

  1. 须要注意的是：设置为flex 布局后，子元素 的 clear（清除浮动）、float（浮动）和vertical-align（垂直对齐方式）属性将失效；

flex布局的基本概念：

  1. 设置为flex布局的元素，称为flex容器，它的所有子元素就是容器成员，被称为项目。

flex容器默认有两个轴：

水平主轴（main axis）和垂直交叉轴（cross axis）。

  1. 主轴的开始位置叫做 main start(与容器边框的交叉点)，结束位置叫做 main end;
  2. 交叉轴的开始位置叫做cross start,结束位置叫做 cross end;

项目（容器成员）默认沿着主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size;

容器的属性：

1、flex-direction 设置项目的排列方向；

值：

  1. row (默认值)：主轴为水平方向，起点在左端；
  2. row-reverse: 主轴为水平方向，起点在右端；
  3. column：主轴为垂直方向，起点在上端。
  4. column-reverse: 主轴为垂直方向，起点在下端。

2、flex-wrap 设置项目换行方式；

值：

  1.  nowrap(默认值) ：不换换；
  2. wrap ：换行，第一行在上方；
  3. wrap-reverse: 换行，第一行在下方；

3、flex-flow（常用，设置主轴方向和换行方式）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

值；

  1. row（默认值）：
  2. row-reverse：
  3. column：
  4. column-reverse
  5. nowrap | wrap | wrap-reverse

4、justify-content ：（常用）定义项目在主轴上的对齐方式。

值： 

  1. flex-start（默认值）：左对齐
  2. flex-end：右对齐
  3. center： 居中
  4. space-between：两端对齐，项目之间的间隔都相等。
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间    隔比项目与边框的间隔大一倍。

5、align-items： 定义项目在交叉轴上的对齐方式；

值：

  1. flex-start：交叉轴的起点对齐。
  2. flex-end：交叉轴的终点对齐。
  3. center：交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content ：定义项目在多行容器中的对齐方式；如果项目只有一行容器，该属性不起作用。

值：

  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间    隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。

项目的属性：

1、order属性；定义项目在主轴上的排列顺序；

  1. 语法： *{order: 1}数字1是根据需求自己定义的值，填写整数，*表示须要设置排序的项目；

2、flex属性：定义项目的缩放比例与基准款宽；

  1. 是 flex-grow/flex-shrink/flex-basis的简写，默认值为0 1 auto,后面2各属性可选；
  2. flex属性有两个快捷值： none和auto（none表示0 0 auto）(auto表示1 1 auto)

3、align-self: 定义单个项目在交叉轴上的对齐方式；可覆盖align-items属性。

  1. 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4、flex-grow属性

  1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  2. flex-grow:1;默认值为0；

5、flex-shrink属性

  1. flex-shrink：属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6、flex-basis属性

  1. flex-basis属性定义项目在分配多余空间之前，项目占据的主轴空间（main size）。浏览    器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  3. 语法：
  4.     .项目 {
  5.           flex-basis: <length> | auto; /* default auto */
  6.     }
  7. 它可以设为跟width或height属性一样的值（比如500px），则项目将占据固定空间。

代码练习：

  1.  <title>flex布局示例代码</title>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             box-sizing: border-box;
  7.         }
  9.         .rongqi {
  10.             width: 480px;
  11.             height: 180px;
  12.             background-color: skyblue;
  13.             display: flex;
  14.             /* 设置项目排列方式 */
  15.             /*  flex-direction    
  16.               row（默认值）：主轴为水平方向，起点在左端。
  17.             row-reverse：主轴为水平方向，起点在右端。
  18.             column：主轴为垂直方向，起点在上沿。
  19.             column-reverse：主轴为垂直方向，起点在下沿。 */
  21.             /* flex-direction: row;
  22.             flex-direction:row-reverse;
  23.             flex-direction: column-reverse;
  24.             flex-direction: column; */
  26.             /* 设置项目换行方式 */
  27.             /* flex-wrap */
  28.             /*   nowrap： 默认值 不换行
  29.             wrap：换行，第一行上方（向下换行）
  30.             wrap-reverse: 换行，第一行在下方（向上换行） */
  31.             /*  flex-wrap:wrap;
  32.             flex-wrap: nowrap;
  33.             flex-wrap: wrap-reverse; */
  35.             /* 设置主轴方向与换行方式 */
  37.             /* flex-flow */
  38.             /* 垂直（起点在下方），换行 */
  39.             /* flex-flow:column wrap; */
  40.             /* 水平从左往右排，不换行 */
  41.             /* flex-flow: row nowrap; */
  42.             /* 垂直（起点在上方），不换行 */
  43.             /* flex-flow:column nowrap; */
  45.             /* 设置项目在主轴上的对齐方式 */
  46.             /* justify-content:  */
  47.             /* 从左往右排并且对齐，默认值 */
  48.             /* justify-content: flex-start; */
  49.             /* 从右往左排 并且对齐*/
  50.             /* justify-content: flex-end; */
  51.             /* 居中排列 */
  52.             /* justify-content: center; */
  53.             /* 两端对齐，并且项目之间的间隔都相等 */
  54.             /* justify-content: space-between; */
  55.             /* 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍 */
  56.             /* justify-content: space-around; */
  58.             /* 设置项目在交叉轴上的对齐方式 */
  59.             /* align-items */
  60.             /* flex-start 从交叉轴的起点对齐 */
  61.             /* align-items: flex-start; */
  62.             /* flex-end 从交叉轴的终点对齐 */
  63.             /* align-items: flex-end; */
  64.             /* center 从交叉轴的中间点对齐 */
  65.             /* align-items: center; */
  66.             /* flex-start 从交叉轴的起点对齐 */
  67.             /* baseline 从项目的第一行文字基线对齐 */
  68.             /* align-items: baseline; */
  69.             /* 默认值，如果项目没有设置高度或者设置为auto时，将占满整个容器高度 */
  70.             /* align-items:stretch; */
  73.             /* 设置项目在多行容器中的对齐方式 */
  74.             /* align-content:; */
  75.             /* 与交叉轴的起点对齐 */
  76.             /* align-content: flex-start; */
  77.             /* 与交叉轴的终点对齐 */
  78.             /* align-content:flex-end; */
  79.             /* 与交叉轴的中间点对齐 */
  80.             /* align-content: center; */
  81.             /* 与交叉轴的两端（上下/左右）对齐，轴线之间的间隔平均分布 */
  82.             /* flex-flow:column wrap; */
  83.             /* align-content:space-between; */
  84.             /* 每根轴线（水平）上下两侧的间隔相等，靠边框的一侧的间隔是轴线之间的间隔的一半 */
  85.             /* align-content: space-around; */
  86.             /* 占满整个交叉轴，默认值 */
  87.             /* align-content: stretch; */
  88.             /* 允许换行 */
  89.             /* flex-wrap: wrap; */
  90.             /* 设置主轴为水平方向 */
  91.             flex-flow: row wrap;
  96.         }
  98.         .rongqi .xiangmu {
  99.             width: 60px;
  100.             height: 60px;
  101.             background-color: red;
  102.             border: 1px solid violet;
  106.         }
  108.         /* 项目属性 */
  109.         /* 项目属性有：
  110.          order（排序、默认为零，数字越小排名越靠前，可以为负数）
  111.          flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间也不放大）
  112.          flex-shrink（定义项目的缩小比例，默认为1，即如果空间不足，该项目将自动缩小）
  113.          flex-basis（定义项目在分配多余空间之前，项目占据的主轴空间（main size）,浏览器根据这个属性，计算主轴是否有多
  114.                     余空间，它的默认值为auto,即项目原本的大小。值可以设置根宽高一样的值，这样它的空间会被固定）
  115.          flex（这属性最常用，flex是 flex-frow、flex-shrink、flex-basis的简写语法，默认值为(0 1 auto),后面两个属性可选，
  116.                     快捷值：[auto（1 1 auto）、none (0 0 auto)]语法：flex：flex-grow flex-shrink flex-basis;
  117.          align-self（设置单个项目的对齐方式（与其它项目的对齐方式不一样，个性化定制对齐方式）可以覆盖align-itmes属性。默认
  118.                     值为 auto,即继承父元素的align-itmes属性，如果没有父元素，则等同于stretch(占满整个容器高度)） */
  119.         /* 排列顺序 */
  120.         /* .rongqi .xiangmu:first-of-type {
  121.             order: 2;
  122.         }
  124.         .rongqi .xiangmu:nth-of-type(2) {
  125.             order: 3;
  126.         }
  128.         .rongqi .xiangmu:nth-of-type(5) {
  129.             order: -1;
  130.         } */
  131.         /* 放大比例,0为默认，有剩余也不放大;都为1 有剩余空间 等分;某个项目为2，其它为1，为2的项目不为1的项目多占1倍的空间 */
  134.         /*  .rongqi .xiangmu:nth-of-type(1) {
  135.             flex-grow: 0;
  136.              flex-grow: 1; 
  137.         }
  139.         .rongqi .xiangmu:nth-of-type(3) {
  140.             flex-grow: 0;
  141.              flex-grow: 1; 
  142.         }
  144.         .rongqi .xiangmu:nth-of-type(2) {
  145.             flex-grow: 2;
  146.              flex-grow: 1; 
  147.         } */
  149.         /* 定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小，通过设置值来控制项目是否缩小，多个项目可以分别设置，值越小优先级越高（不缩小） */
  150.         /* .rongqi .xiangmu:first-of-type{
  151.             flex-shrink:0;
  152.         } */
  153.         /* 定义项目在分配多余空间之前，项目占据的主轴空间 */
  154.         /* .rongqi .xiangmu:first-of-type{
  155.             flex-basis: 200px;
  156.         }
  157.         */
  159.         /* 语法：flex：flex-grow flex-shrink flex-basis; */
  160.         /*   .rongqi .xiangmu:nth-of-type(9){
  161.             flex:auto; 
  162.             flex:auto;
  163.         } */
  165.         /* 定义单个项目的对齐方式 align-self */
  166.         .rongqi .xiangmu:nth-of-type(9) {
  167.             align-self: flex-end;
  168.             align-self: flex-start;
  169.             align-self: center;
  170.             align-self: baseline;
  171.             align-self: stretch;
  172.         }
  175.     </style>
  176. </head>
  178. <body>
  179.     <div class="rongqi">
  180.         <div class="xiangmu">1</div>
  181.         <div class="xiangmu">2</div>
  182.         <div class="xiangmu">3</div>
  183.         <div class="xiangmu">4</div>
  184.         <div class="xiangmu">5</div>
  185.         <div class="xiangmu">6</div>
  186.         <div class="xiangmu">7</div>
  187.         <div class="xiangmu">8</div>
  188.         <div class="xiangmu">8</div>
  189.         <div class="xiangmu">7</div>
  192.     </div>
  193. </body>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：flex已经应用了十几年了,已成为标准,不需要再加浏览器前缀了,除非用户使用了非常古老的浏览器
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录