博主信息
黑白。
博文
7
粉丝
2
评论
0
访问量
888
积分:0
P豆:14

2019-12-23 flex容器的6个属性练习总结-***十期线上班

2019年12月31日 08:42:12阅读数:381博客 / www.69096.com_【官方首页】-葡京娱乐场黑白。 / HTML前端开发

1. flex是什么

  • flex: 弹性布局
  • flex兼容性不要担心

2. flex解决了什么问题

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

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

  • 只有二级: 父级和子级
  • 父元素叫: flex容器(container)
  • 子元素叫: flex项目(item)flex元素

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

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

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; 平均对齐

6. 案例练习

  • HTML页面

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>flex练习</title>
    6. <style>
    7. .container {
    8. border: 1px dashed;
    9. box-sizing: border-box;
    10. background-color: lightsteelblue;
    11. }
    12. .item {
    13. width: 100px;
    14. height: 50px;
    15. border: 1px dashed;
    16. background-color: wheat;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <div class="container">
    22. <div class="item">1</div>
    23. <div class="item">2</div>
    24. <div class="item">3</div>
    25. <div class="item">4</div>
    26. <div class="item">5</div>
    27. <div class="item">6</div>
    28. </div>
    29. </body>
    30. </html>

  • 转为flex容器(默认为按行排列)

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*默认flex-direction: row排列*/
    5. }

  • flex-direction: column(按列方向排列)

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. flex-direction:column;
    5. }

  • flex-wrap: 是否允许换行

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. flex-wrap:wrap; /*允许换行*/
    5. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. flex-wrap: nowrap; /*不设置此属性时也默认为不允许换行*/
    5. }

  • flex-flow:主轴方向 是否允许换行

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*按行方向排序,允许换行*/
    5. flex-flow: row wrap;
    6. }

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

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*flex容器默认为起始线对齐*/
    5. justify-content: flex-start;
    6. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*向终止线对齐*/
    5. justify-content: flex-end;
    6. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*居中对齐*/
    5. justify-content: center;
    6. }

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

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*两端对齐*/
    5. justify-content: space-between;
    6. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*分散对齐*/
    5. justify-content: space-around;
    6. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. /*平均对齐*/
    5. justify-content: space-evenly;
    6. }

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

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*flex默认为顶部对齐*/
    6. align-items: flex-start;
    7. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*底部对齐*/
    6. align-items: flex-end;
    7. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*垂直居中对齐*/
    6. align-items: center;
    7. }

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

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*允许换行*/
    6. flex-wrap: wrap;
    7. /*两端对齐*/
    8. align-content: space-between;
    9. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*允许换行*/
    6. flex-wrap: wrap;
    7. /*两端对齐*/
    8. align-content: space-around;
    9. }

    1. .container {
    2. /*转为弹性盒子,flex容器*/
    3. display: flex;
    4. height: 200px;
    5. /*允许换行*/
    6. flex-wrap: wrap;
    7. /*平均对齐*/
    8. align-content: space-evenly;
    9. }

7.手写作业

批改老师:Peter-ZhuPeter-Zhu

批改状态:合格

老师批语:教科书级的作业, 推荐所有学员学习

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!
  • 页面底部区域 foot.htm