Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端Flex弹性盒子作业，弹性盒子元素的六个属性及其使用
Blogger Information
Blog 11
fans 0
comment 0
visits 27431
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弹性盒子作业，弹性盒子元素的六个属性及其使用
饮雪煮茶
Original
1052 people have browsed it

一、组件化开发（components）小结：

1.组件化开发就是把一个页面拆分成最小的功能块，在写网页是再通过把各个功能块组装起来构成页面。这样可以减少重复工作。
2.组件化开发注意点：

对文件夹的管理，文件的命名注意，比较容易记忆，这样再以后利用是可以快速找到文件；
编程约定，@import语法实现页面的组装；
是一个组件必须使用一个独立无二的类名class。
最大的意义在于他的复用性

二、Flex弹性盒子元素的六个属性

  • 1.flex-basis属性定义了分配容器多余空间之前，项目占据的主轴空间。也就是现在的显示宽度，它的默认值是auto，即项目的本来大小。

  1. .item{
  2.     flex-basis:<legth>; /*可以是数值和百分比*/
  3.     flex-basis:auto; /*默认值，原始宽度*/
  4. }

  • 2.flex-grow属性定义了项目的放大比例，默认值是0，即如果存在剩余空间，也不放大。

  1. .item{
  2.     flex-grow:<number>; /*放大的数值，默认值是0*/
  3. }

  • 3.flex-shrink属性定义了项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小。

  1. .item{
  2.     flex-shrink:<mumber>;/*缩小的数值，默认值是1*/
  3. }

  • 4.flex属性是flex-frow,flex-shrink,flex-basis的缩写，默认值为0 1 auto.

  1. flex:0 1 auto;  等价于 flex:initial;
  2. flex:auto; 等价于 flex:1 1 auto; 等价于 flex:2;
  3. flex:none; 等价于 flex:0 0 auto;

  • 5.order属性定义了项目的排列顺序，数值越小，排列越靠前，默认值为0.

  1. .item{
  2.     order:<integer>; /*排列数值，默认值为0*/
  3. }

  • 6.align-self属性定义了单个项目再纵轴上的对齐方式，可以覆盖align-items定义的属性，默认值为auto即继承父元素的align-items属性，如果没有父元素，等同于stretch。

  1. .tiem{
  2.     align-self:auto; /*默认值，继承父元素align-items属性*/
  3.     align-self:flex-start; /*交叉轴开始对齐*/
  4.     align-self:flex-end; /*交叉轴结束对齐*/
  5.     align-self:center; /*交叉轴中间对齐*/
  6.     align-self:baseline; /*交叉轴第一列基线*/
  7.     align-self:stretch; /*项目的边距盒的尺寸尽可能接近所在行的尺寸*/
  8. }

三、默写组件开发头部代码

  • 1.初始代码重置css样式。

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

  • 2.头部专用css文件：

  1. @import url(../../public_reset.css);
  2. .public-header{
  3.     height:44px;
  4.     background-color:000;
  5.     padding:0 20px;
  6.     display:flex;
  7.     flex-flow: row nowrap;
  8. }
  9. .public-header a{
  10.     line-height:44px;
  11.     color:#ccc;
  12.     padding:0 10px;
  13. }
  14. .public-header > a:hover{
  15.     background-color:#fff;
  16.     color:#000;
  17. }
  18. .public-header > span{
  19.     margin-left:auto;
  20. }
  21. .public-header > span > a > i{
  22.     font-size:16px;
  23.     color:#ccc;
  24.     padding-right:10px;
  25. }

  • 3.头部html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <link rel="stylesheet" href="../../static/font/iconfont.css">
  6.         <link rel="stylesheet" href="./public_header.css">
  7.         <title>头部导航</title>
  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>
  21.     </body>
  22. </html>
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