search

博客列表 >12-25作业--flex布局——子元素在父元素里面的定位

12-25作业--flex布局——子元素在父元素里面的定位

十年一梦
十年一梦原创
2019年12月26日 17:41:221162浏览

flex 布局——子元素在父元素中的定位

1、子元素的宽度，子元素在分配父元素剩余空间之前的宽度

  • flex-basis:auto; 默认值，在子元素css中定义的类似width:100px;这个宽度;
  • flex-basis:80px; 自定义的值，可以取代width:100px;中定义的宽度;
  • flex-basis:20%; 当宽度定义为百分比的时候，这个百分比是相对父元素比较的，比如父元素width:100px;那么这个子元素的宽度就是20px;
  • flex-basis的优先级大于width,并且可以用min-width设定子元素的最小宽度；

    2、子元素的扩展，继承和分配父元素的剩余空间

  • flex-grow：数值 可以设定子元素所分配父元素剩余空间的比例，这个数值可以是整数，也可以是百分比；

    3、子元素的收缩，当父元素宽度不够的情况下收缩的比例

  • flex-shrink:数值可以设定子元素收缩比例，这个数值可以是整数也可以是百分比，0是不收缩；

    4、flex: flex-grow flex-shrink flex-basis上三种设置的简写

  • 首个位置flex-grow是控制要不要 扩展，分不分配父元素剩余空间；
  • 第二个位置flex-shrink 控制子元素在父元素空间不足的时候 要不是收缩；
  • 第三个位置flex-basis设定子元素的宽度；

    5、align-self: 设置单独子元素在父元素交叉轴的对齐方式，如图；

6、order:数字 是设定子元素排序的位置，默认是先写在前，order数值越小越靠前，如图；

组件开发尝试

公共头部部分puplic_header.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共头部</title>
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="public_header.css">
  8. </head>
  9. <body>
  10. <div class="public-header">
  11.     <a href="">网站首页</a>
  12.     <a href="">二手交易</a>
  13.     <a href="">房屋出租</a>
  14.     <a href="">兼职招聘</a>
  15.     <a href="">网站导航</a>
  16.     <span>
  17.         <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  18.         <a href="">免费注册</a>
  19.     </span>
  20. </div>
  22. </body>
  23. </html>

公共头部初始化public_reset.css部分

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     font-size: 13px;
  7.     color: #555555;
  8.     background-color: #efefef;
  9. }
  10. a{
  11.     text-decoration: none;
  12.     color: #404040;
  13.     font-size: 13px;
  14. }
  15. li{
  16.     list-style: none;
  17. }

公共头部public_header.css部分

  1. @import "../public_reset.css";
  2. /*公共头部导航*/
  3. .public-header {
  4.     height: 44px;
  5.     background-color: #000000;
  6.     padding: 0 20px;
  7.     display: flex;
  8.     flex-flow: row nowrap;
  9. }
  10. .public-header a {
  11.     line-height: 44px;
  12.     color: #cccccc;
  13.     padding: 0 10px;
  14. }
  15. .public-header > a:hover{
  16.     color: #000000;
  17.     background-color: #ffffff;
  19. }
  20. .public-header > span {
  21.     margin-left: auto;
  22. }
  23. .public-header > span i {
  24.     font-size: 16px;
  25.     color: #cccccc;
  26.     padding-right: 10px;
  27. }

公共大标题public_headline.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_headline.css">
  6.     <title>公共大标题</title>
  7. </head>
  8. <body>
  9.     <div class="public-headline">
  10.         <span>二手交易</span>
  11.     </div>
  12. </body>
  13. </html>

公共大标题public_headline.css文件

  1. @import "../public_reset.css";
  2. .public-headline {
  3.     padding: 30px;
  4.     text-align: center;
  5. }
  6. .public-headline > span{
  7.     font-size: 30px;
  8.     font-weight: bold;
  9.     padding-bottom: 10px;
  10.     border-bottom: 2px solid red;
  11. }

总结：

组件开发大概就是把复制的页面分拆开来制作然后组装起来，这样的好处就是标准化，分散化，能流水线似的生成网页，可以做分工配合完成一个项目，在查错方面也可以那个错误找那个组件。也利于以后做页面修改的时候，不需要在做整体整改，方面快捷，可重复性强；
手写部分：

上一条：12月25日作业：实战操作（组件）导航案例下一条：flex容器的属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多