简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex容器、项目的常用属性
Blogger Information
Blog 29
fans 0
comment 0
visits 19732
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容器、项目的常用属性
手机用户1576673622
Original
644 people have browsed it

flex容器

1.术语

  • 任何属性都可以添加 display：flex 属性转为弹性盒子。
  • 转为flex元素（容器）之后，内部子元素（项目）就能使用flex布局了。
  • 容器内的项目自动转为‘行内块元素’（不管之前是什么类型）

1.容器，具有display：flex的属性元素，flex容器。
2.项目，flex 容器的子元素。
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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>D</title>
  8.     <style>
  9.         .box {
  10.             /* 转为flex容器 */
  11.             display: flex;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 容器 -->
  17.     <div class="box">
  18.         <!-- 子元素（项目） -->
  19.         <div>项目</div>
  20.         <div>项目</div>
  21.         <div>项目</div>
  22.         <div>项目</div>
  23.         <div>项目</div>
  24.     </div>
  25. </body>
  26. </html>

2.容器属性

  • 用在容器上的属性。
序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式

  • 1.flex-flow 主轴方向与换行方式。

    1.       .box {
    2.           /* 单行容器 */
    3.           /* 水平排列  不换行   */
    4.           flex-flow: row nowrap;
    5.           /* 多行容器 */
    6.           /* 水平排列  换行 */
    7.           flex-flow: row wrap;
    8.       }
    10.       .box {
    11.           /* 垂直排列 */
    12.           flex-flow: column nowrap;
    13.           /* 垂直排列 换行 */
    14.           flex-flow: column wrap;
    16.       }

  • 2.justify-content 项目在主轴上的对齐方式

    1.       .box {
    2.           /* 空间分配二种方案:  */
    3.           /* 1. 将所有项目视为一个整体,在项目组二边进行分配 */
    4.           /* 默认 */
    5.           justify-content: flex-start;
    6.           /* 靠在右边 */
    7.           justify-content: flex-end;
    8.           /* 居中 */
    9.           justify-content: center;
    11.           /* 2. 将项目视为一个个独立的个体,在项目之间进行分配 */
    12.           /* 二端对齐 */
    13.           justify-content: space-between;
    14.           /* 分散对齐 */
    15.           justify-content: space-around;
    16.           /* 平均对齐 */
    17.           justify-content: space-evenly;
    18.       }
  • 3.align-items 项目在交叉轴上的对齐方式
    单行容器没有二端对齐、分散对齐、平均对齐的方式。
    1.   /* 交叉轴上的对齐方案 */
    2.   .container {
    3.       /* 默认拉伸 */
    4.       align-items: stretch;
    5.       align-items: flex-start;
    6.       align-items: flex-end;
    7.       align-items: center;
    8.   }

  • 4.align-content 项目在多行容器中的对齐方式。
    多行容器，把所有项目看成一个整体。

    1.   .container {
    2.       flex-flow: row wrap;
    4.       align-content: stretch;
    5.       align-content: flex-start;
    6.       align-content: flex-end;
    7.       align-content: center;
    9.       align-content: space-between;
    10.       align-content: space-around;
    11.       align-content: space-evenly;
    12.   }

    3.项目属性

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

  • 1.flex 

    1.   /* 项目属性flex  */
    2.   .container .item {
    3.       /* flex: flex-grow flex-shrink flex-basis */
    4.       /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
    5.       /* 默认会上,不放大或收缩 */
    6.       flex: 0 1 auto;
    7.       flex: initial;
    8.       /* 允许放大和收缩 */
    9.       flex: 1 1 auto;
    10.       flex: auto;
    11.       /* 禁止放大和收缩 */
    12.       flex: 0 0 auto;
    13.       flex: none;
    15.       /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
    16.       flex: 1;
    17.       /* 等于  flex: 1 1 auto; */
    18.       flex: 2;
    19.       flex: 3;
    21.       /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
    22.   }

  • 2.align-self

    1.   /* 例如设置第2个项目与其它项目的对齐方式不一样 */
    2.   .container>.item:nth-of-type(2) {
    3.       align-self: stretch;
    4.       align-self: flex-start;
    5.       align-self: flex-end;
    6.       align-self: center;
    8.       /* 同样支持定位 */
    9.       position: absolute;
    10.       left: 2em;
    11.       top: 3em;
    12.   }
  • 3.order
    显示顺序:默认按书写的源码顺序排列
    默认序号越小越靠前,越大越靠后
    支持负值
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！