Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12-25作业--flex布局——子元素在父元素里面的定位
Blogger Information
Blog 9
fans 3
comment 0
visits 11048
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
12-25作业--flex布局——子元素在父元素里面的定位
十年一梦
Original
1163 people have browsed it

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. }

总结：

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

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