Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器(常用属性)的理解
Blogger Information
Blog 46
fans 0
comment 0
visits 39103
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容器(常用属性)的理解
lus菜
Original
943 people have browsed it

flex弹性盒布局:

  1. 任何元素都可以通过添加display:flex属性,转为弹性盒元素,
  2. 转为flex元素后,它的内部的"子元素"就支持flex布局了
  3. 只要使用了display: flex属性的元素就称为:(flex容器)
  4. flex容器中有"子元素"称之为:flex项目
  5. 容器中的项目自动转为"行内块元素"(不管之前是什么类型)
  6. 容器默认存在两根轴:水平方向(主轴) 与 垂直方向的(交叉轴)

容器属性:

  1. flex-direction: 决定主轴的方向默认值, row(水平方向) 与 colum(垂直方向)
  2. flex-wrap: 决定不换行, 默认值nowrap(不换行) 与 wrap(换行)
  4. justify-content:定义了项目在主轴上的对齐方式
  5. flex-start: (默认值)左对齐, flex-end: 右对齐, center: 居中, space-between: 两端对齐, space-around: 分散对齐, space-evenly: 平均对齐,
  7. align-items: 定义项目在交叉轴上如何对齐
  8. stretch:默认拉伸, flex-start:交叉轴的起点对齐, flex-end:交叉轴的终点对齐, center:交叉轴的中点对齐,
  10. align-content:性定义了多根轴线的对齐方式
  11. stretch(默认值):轴线占满整个交叉轴 flex-start:与交叉轴的起点对齐 flex-end:与交叉轴的终点对齐 center:与交叉轴的中点对齐 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布 space-around:每根轴线两侧的间隔都相等

项目属性:

  1. flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征
  2. flex-grow:放大因子 flex-hrink收缩因子 flex-basis:项目在主轴上的基准宽度
  3. flex:0 1 auto;默认就会不放大或收缩 flex:1 1 auto;允许放大和收缩 flex:0 0 auto;禁止放大或收缩
  4. order 设置某个项目在主轴上的排列顺序 数值越小,排列越靠前,支持负值
  5. align-self: 定义某个项目的对齐方式

演示代码:

  1. //justify-content: 定义了项目在主轴上的对齐方式
  2.  *{
  3.             //转为IE盒子
  4.             box-sizing: border-box;
  5.         }
  6.         .index{
  7.             //转换为felx弹性布局元素
  8.             display: flex;
  9.             height: 15em;
  10.             border: 1px solid rgb(0, 0, 0);
  11.             padding: 1em;
  12.             margin: 1em;
  13.         }
  14.         .index>.box{
  15.             width: 4em;
  16.             height: 5em;
  17.             background-color: lightsalmon;
  18.             border: 3px solid #000;
  19.         }
  20.         .index{
  21.             //简写默认值
  22.             flex-flow: row nowrap;
  23.              //(默认值)左对齐
  24.              justify-content: flex-start;
  25.              //右对齐
  26.              justify-content: flex-end;
  27.              //居中
  28.              justify-content: center;
  29.              //两端对齐
  30.              justify-content: space-between;
  31.              //分散对齐
  32.              justify-content: space-around;
  33.              //平均对齐
  34.               justify-content: space-evenly;
  35.         }
  36. </style>
  37. <body>
  38.     <div class="index">
  39.         <div class="box">早上</div>
  40.         <div class="box">中午</div>
  41.         <div class="box">傍晚</div>
  42.         <div class="box">晚上</div>
  43.     </div>
  44. </body>

效果:






  1. <style>
  2.         *{
  3.             //转为IE盒子
  4.             box-sizing: border-box;
  5.         }
  6.         .index{
  7.             //转换为felx弹性布局元素
  8.             display: flex;
  9.             height: 15em;
  10.             border: 1px solid rgb(0, 0, 0);
  11.             padding: 1em;
  12.             margin: 1em;
  13.         }
  14.         .index>.box{
  15.             width: 3em;
  16.             background-color: lightsalmon;
  17.             border: 3px solid #000;
  18.         }
  19.  //align-items: 定义项目在交叉轴上如何对齐
  20.         .index{
  21.             //默认拉伸
  22.             align-items: stretch;
  23.             //交叉轴的起点对齐
  24.             align-items: flex-start;
  25.             //交叉轴的终点对齐
  26.             align-items: flex-end;
  27.             //交叉轴的中点对齐
  28.             align-items: center;
  29.       }
  30.     //改变元素顺序
  31.    .index>.box:nth-of-type(3){
  32.         order: 1;
  33.       }
  34. </style>
  35. <body>
  36.     <div class="index">
  37.       <div class="box">早上</div>
  38.       <div class="box">中午</div>
  39.       <div class="box">傍晚</div>
  40.       <div class="box">晚上</div>
  41.       <div class="box">半夜</div>
  42.     </div>
  43. </body>

示例:





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