Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器属性的案例-PHP培训十期线上班
Blogger Information
Blog 7
fans 0
comment 0
visits 6088
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容器属性的案例-PHP培训十期线上班
方小生
Original
859 people have browsed it

12月23日作业

1.手撕flex容器六大属性及功能

flex六大属性及功能

2.flex容器小案例

demo1示例

  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 red;
  9.             /*只要盒子加了padding、border，就得加box-sizing*/
  10.             background-color:lightyellow;
  11.             box-sizing:border-box;
  12.         }
  13.         .item{
  14.             width:100px;
  15.             height:50px;
  16.             border:1px dashed lightblue;
  17.         }
  18.         .container{
  19.             /*转为弹性盒子*/
  20.             display:flex;
  21.             /*1.容器中的主轴方向*/
  22.             /* flex-direction:column; */
  23.             /* flex-direction:row; */
  25.             /*2.是否允许创建多行容器，一行排不下，是否允许换行*/
  26.             /* flex-wrap:nowrap; */
  27.             /* flex-wrap:wrap; */
  29.             /*3.上面两个属性缩写*/
  30.             flex-flow:row wrap;
  32.             /*4.项目在主轴上的对齐方式*/
  33.             /* justify-content:flex-start; */
  34.             /* justify-content:flex-end; */
  35.             /* justify-content:center; */
  36.             /*剩余空间分配方式*/
  37.             /* justify-content:space-between; */ /*两端对齐*/
  38.             /* justify-content:space-around; */  /*分散对齐*/
  39.             justify-content:space-evenly;        /*平均对齐*/
  41.             /*5.项目在交叉轴上的对齐方式*/
  42.             height:300px;
  43.             /* align-items:flex-start; */
  44.             /* align-items:flex-end; */
  45.             /* align-items:center; */
  47.             /*6.项目在多行容器的交叉轴上的对齐方式*/
  48.             /* align-content:space-between; */
  49.             /* align-content:space-around; */
  50.             /* align-content:space-evenly; */
  51.             align-content:center;
  52.             /* align-content:flex-end; */
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="container">
  58.         <span class="item">item1</span>
  59.         <span class="item">item2</span>
  60.         <span class="item">item3</span>
  61.         <span class="item">item4</span>
  62.         <span class="item">item5</span>
  63.         <span class="item">item6</span>
  64.         <span class="item">item7</span>
  65.         <span class="item">item8</span>
  66.     </div>
  67. </body>
  68. </html>

demo1运行截图

flex布局

3.对于12月20日布局作业的总结

作为一个前端小司机，在这次布局练习中很多细节没有做到位，其中存在的问题如下：
1.很多地方缺少链接；比如，第一个logo部分，看到这，应该立马想到这个是可点击的，需要加链接；还有导航的链接等
2.图片的空隙问题，没有处理；
3.在写css更多的使用后代选择器，并没像老师那样精准定位使用子代选择器（ps：之前不熟悉，现在熟了），说明其他的选择器属性不熟悉，需要多看
4.整体结构虽相同，但感觉没老师的清晰；心里总觉得自己没有老师写的好，而且自己采用表格布局（不是很主流，应该使用定位）
5.语义化标签与简洁化标签的使用，什么原则，我还是不知道

总结一下：从和老师的代码对比中看出，虽然实现了同样效果，可是我对布局结构还是不是很深入，很多问题忽视掉了

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