search

博客列表 >flex容器的6个属性练习总结-PHP培训十期线上班-20191223

flex容器的6个属性练习总结-PHP培训十期线上班-20191223

高的PHP十期培训学习笔记
高的PHP十期培训学习笔记原创
2019年12月27日 19:39:26624浏览

flex是什么

1、flex: 弹性布局
2、flex兼容性不要担心

2. flex解决了什么问题

1、块元素的垂直居中
2、元素在容器中 自动伸缩,适应容器大小的变化,特别适合移动端布局

3. flex布局的角色/参与者有哪些

1、只有二级: 父级和子级
2、父元素叫: flex容器(container)
3、子元素叫: flex项目(item) 或 flex元素

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

1、flex是一维布局,项目要么水平排列, 要么垂直排列,任何时间都只能沿着一个方向排列
2、flex项目的排列方向, 称为主轴, 排列方式有二种, 所以主轴也有二种: 水平/行轴,垂直/纵轴
3、与主轴对应的轴,称为交叉轴, 副轴, 侧轴

5. 可以用到flex容器上的属性有哪些

flex-direction: 设置容器中的主轴方向

  1. flex-direction: row;       按行方向延伸
  2. flex-direction: column;    按列方向延伸

flex-wrap: 是否允许创建多行容器, 一行排不下, 是否允许换行显示

  1. flex-wrap: nowrap;   允许换行
  2. flex-wrap: wrap;     不允许换行

flex-flow: 是上面二个属性的简写

  1. flex-flow: 主轴方向 是否换行显示;
  2. flex-flow: row wrap;    按行方向延伸且允许换行

justify-content: 设置容器中的项目在主轴上的对齐方式

  1. justify-content: flex-start;   向起始线对齐
  2. justify-content: flex-end;     向终止线对齐
  3. justify-content: center;       居中对齐

justify-content: 可以分配主轴上剩余空间

  1. justify-content: space-between;  两端对齐
  2. justify-content: space-around;   分散对齐
  3. justify-content: space-evenly;   平均对齐

align-items: 项目在交叉轴上的排列方式

  1. align-items: flex-start;  顶部对齐
  2. align-items: flex-end;    底部对齐
  3. align-items: center;      垂直居中对齐

align-content: 设置项目在多行容器交叉轴上的对齐方式

  1. align-content: space-between;  上下对齐
  2. align-content: space-around;   分散对齐
  3. align-content: space-evenly;   平均对齐

案例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex1223作业</title>
  6.     <style>
  7.         .container {
  8.             /*给容器添加一个虚线属线，便于测试*/
  9.             /*border: 粗细 虚线 颜色（颜色不填的话默认为黑色）;*/
  10.             border: 1px dashed #9a6e3a;
  11.             /*只要盒子加了 padding,border,就马上加上box-sizing,防止盒子撑大*/
  12.             box-sizing: border-box;
  13.             /*添加一个背景色*/
  14.             background-color: #9a6e3a;
  15.         }
  16.         .item {
  17.             /*宽度高度的快速写法为 W+大小+TAB*/
  18.             width: 100px;
  19.             height: 50px;
  20.             border: 1px dashed;
  21.             background-color: #44AAEE;
  22.         }
  23.         .container {
  24.             /*转为弹性盒子，flex容器*/
  25.             /*快速写法df+回车*/
  26.             display: flex;
  27.             /*转换为flex容器后，flex子元素全部变为：行内块元素，水平排列，可以设置宽和高*/
  28.         }
  29.         .container {
  30.             /*1.flex的第一个属性，flex-direction:设置容器中的主轴方向，默认为行*/
  31.             /*flex-direction: row;*/
  32.             /*列：垂直排列*/
  33.             /*flex-direction: column;*/
  35.             /*2.flex-wrap:是否允许换行显示，默认不换行*/
  36.             /*flex-wrap: nowrap;*/
  37.             /*换行显示*/
  38.             /*flex-wrap: wrap;*/
  40.             /*3.flex-flow:是上面二个属性的简写*/
  41.             /*flex-flow: 主轴方向 是否换行显示;*/
  42.             flex-flow: row wrap;
  44.             /*4.设置容器中的项目在主轴上的对齐方式*/
  45.             /*下面的是默认值，靠开始的位置对齐(左对齐)*/
  46.             /*justify-content: flex-start;*/
  47.             /*下面的是靠结束的位置对齐（右对齐）*/
  48.             /*justify-content: flex-end;*/
  49.             /*居中对齐*/
  50.             /*justify-content: center;*/
  52.             /*5.分配主轴上的剩余空间*/
  53.             /*两端对齐*/
  54.             /*justify-content: space-between;*/
  55.             /*分散对齐，子元素的左右空间大小一样(中间的元素空间大小是最左或最右的大小的两倍)*/
  56.             /*justify-content: space-around;*/
  57.             /*平均对齐,剩余空间也平均分配*/
  58.             justify-content: space-evenly;
  60.             /*6.项目在单行容器交叉轴上的排列方式（列轴）*/
  61.             height: 300px;
  62.             /*默认开始位置对齐，左对齐*/
  63.             /*align-items: flex-start;*/
  64.             /*底部对齐*/
  65.             /*align-items: flex-end;*/
  66.             /*居中对齐*/
  67.             /*align-items: center;*/
  69.             /*7.align-content:项目在多行容器上的对齐方式*/
  70.             /*默认值,靠顶*/
  71.             /*align-content: flex-start;*/
  72.             /*两端对齐（列轴为上下对齐）*/
  73.             /*align-content: space-between;*/
  74.             /*分散对齐,每个元素的两边距离相同*/
  75.             /*align-content: space-around;*/
  76.             /*平均分布对齐*/
  77.             align-content: space-evenly;
  78.         }
  81.     </style>
  82. </head>
  83. <body>
  84. <div class="container">
  85.     <span class="item">1</span>
  86.     <span class="item">2</span>
  87.     <span class="item">3</span>
  88.     <span class="item">4</span>
  89.     <span class="item">5</span>
  90.     <span class="item">6</span>
  91.     <span class="item">7</span>
  92.     <span class="item">8</span>
  93. </div>
  94. </body>
  95. </html>

1、flex-direction:设置容器中的主轴方向，默认为行

  1. .container {
  2.             /*1.flex的第一个属性，flex-direction:设置容器中的主轴方向，默认为行*/
  3.             flex-direction: row;
  4.             }

2、flex-direction: column 垂直排列

  1. .container {
  2.             /*列：垂直排列*/
  3.             flex-direction: column;
  4.             }


3、flex-wrap:是否允许换行显示，默认不换行

  1. .container {
  2. /*2.flex-wrap:是否允许换行显示，默认不换行*/
  3.             /*flex-wrap: nowrap;*/
  4.             /*换行显示*/
  5.             flex-wrap: wrap;
  6.             }


4、flex-flow:是上面二个属性的简写（值：主轴方向 是否换行显示）

  1.     ```
  2.     .container {
  3.         /*3.flex-flow:是上面二个属性的简写*/
  4.         /*flex-flow: 主轴方向 是否换行显示;*/
  5.         flex-flow: row wrap;
  6.     }
  7.     ```


5、justify-content：左对齐/右对齐

  1.         .container {
  2. /*4.设置容器中的项目在主轴上的对齐方式*/
  3.             /*下面的是默认值，靠开始的位置对齐(左对齐)*/
  4.             /*justify-content: flex-start;*/
  5.             /*下面的是靠结束的位置对齐（右对齐）*/
  6.             justify-content: flex-end;
  7.         }


6、justify-content：居中对齐

  1.         .container {
  2. /*居中对齐*/
  3.             justify-content: center;
  4.         }


7、justify-content:分配主轴上的剩余空间，两端对齐

  1.         .container {
  2. /*5.分配主轴上的剩余空间*/
  3.             /*两端对齐*/
  4.             justify-content: space-between;
  5.         }


8、justify-content:分配主轴上的剩余空间，分散对齐

  1.         .container {
  2.  /*分散对齐，子元素的左右空间大小一样(中间的元素空间大小是最左或最右的大小的两倍)*/
  3.             /*justify-content: space-around;*/
  4.             /*平均对齐,剩余空间也平均分配*/
  5.             /*justify-content: space-evenly;*/
  6.         }


9、align-items:左对齐 项目在单行容器交叉轴上的排列方式

  1.         .container {
  2. /*6.项目在单行容器交叉轴上的排列方式（列轴）*/
  3.             height: 300px;
  4.             /*默认开始位置对齐，左对齐*/
  5.             /*align-items: flex-start;*/
  6.         }


10、align-items:底部对齐

  1.         .container {
  2. /*6.项目在单行容器交叉轴上的排列方式（列轴）*/
  3.             height: 300px;
  4.             /*底部对齐*/
  5.             align-items: flex-end;
  6.         }


11、align-items:居中对齐

  1.         .container {
  2. /*居中对齐*/
  3.             align-items: center;
  4.         }


12、align-content:项目在多行容器上的对齐方式(默认值：靠顶)

  1.         .container {
  2. /*7.align-content:项目在多行容器上的对齐方式*/
  3.             /*默认值,靠顶*/
  4.             align-content: flex-start;
  5.         }


13、align-content:两端对齐（列轴为上下对齐）

  1.         .container {
  2. /*两端对齐（列轴为上下对齐）*/
  3.             align-content: space-between;
  4.         }


14、align-content:分散对齐,每个元素的两边距离相同

  1.         .container {
  2. /*分散对齐,每个元素的两边距离相同*/
  3.             align-content: space-around;
  4.         }


15、align-content:平均分布对齐

  1.         .container {
  2. /*平均分布对齐*/
  3.             align-content: space-evenly;
  4.         }

flex容器的六个属性总结

上一条：2019年12月26日 作业 flex弹性盒子实战：“二手商品交易”+“评论与回复”下一条：flex实战(二手交易区,翻页,评论组件)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多