search

博客列表 >flex布局容器基本属性--- PHP培训十期线上班

flex布局容器基本属性--- PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2019年12月24日 14:41:54699浏览

flex布局基础属性

简单效果

代码（属性说明 在代码注释里）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex布局</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         /*应用 flex 弹性盒子布局的元素，被称之为容器。
  13.         弹性盒子：也被成为“一维布局”，只能处理一个维度上的一行或者一列。
  14.         */
  15.         .container{
  16.             width: 300px;
  17.             height: 200px;
  18.             border: 1px dashed;
  19.             /*box-sizing 让盒子不被撑开*/
  20.             box-sizing: border-box;
  21.             background-color: lightblue;
  22.             display: flex;
  23.         }
  25.         /*应用 flex 弹性盒子布局的元素的子元素，被称之为项目。
  26.         并且，子元素将会被转换为 “行内块元素” 也就是等同
  27.         display: inline-block;
  28.         */
  29.         .item{
  30.             width: 50px;
  31.             height:50px;
  32.             border: 1px dashed;
  33.             background-color: #0077aa;
  34.         }
  36.         /*弹性盒子的 容器 具备的属性
  37.         1- flex-direction 属性，控制弹性盒子的 主轴和交叉轴。
  38.             flex-direction:row ,主轴为横轴 ，元素沿着 横向水平排列；
  39.             flex-direction:column,主轴为纵轴，元素沿着，纵向垂直排列；
  40.             与主轴垂直交叉 的轴被称之为“交叉轴” 或者“侧轴”。
  41.             盒子默认 是横轴为主轴
  42.         */
  43.         .container{
  44.             /*flex-direction: column;*/
  45.             flex-direction: row;
  46.         }
  48.         /*弹性盒子的 容器 具备的属性
  49.         2- justify-content 属性，控制弹性盒子的 容器中，子元素（项目）起始线和终止线，
  50.             一般用来操 盒子内项目的 “左右与居中的对齐方式”。
  51.             justify-content: flex-start ,沿着起始线 水平或者垂直对齐；
  52.             justify-content: center ,沿着中线 水平或者垂直对齐；
  53.             justify-content: flex-end ,沿着终止线 水平或者垂直对齐；
  54.             justify-content: stretch ,
  55.             盒子容器默认 justify-content: start;
  56.         */
  58.         /*弹性盒子的 容器 具备的属性
  59.         2.1-使用 justify-content 分配主轴上的剩余空间。
  60.             justify-content: space-around; 将剩余空间，平均分配到每个
  61.             项目（子元素）的左右空间之中，而且中间间隔是两端间隔的二倍；
  63.             justify-content: space-between; 将剩余空间，平均分配到每个
  64.             项目（子元素）之间，即行或列的两端都没有剩余空间；
  66.             justify-content:space-evenly; 将剩余空间,平均分配到每个
  67.             项目（子元素）的周围（上下左右【多行】）
  68.         */
  69.         .container{
  70.             /*justify-content: center;*/
  71.             /* justify-content: space-between;*/
  72.             justify-content: space-around;
  74.         }
  76.         /*弹性盒子的 容器 具备的属性
  77.         3- flex-wrap,属性表示，是否允许盒子容器内部的项目多行显示。
  78.             默认属性值 为 nowrap(不允许换行);
  79.             flex-wrap: wrap; 允许换行
  80.         */
  81.         .container{
  82.             flex-wrap: nowrap;
  83.         }
  85.         /*
  86.         3.1- 因为在盒子布局中，主轴方向定义与多行显示比较常用，所以有简写方式：
  87.              默认值：flex-flow：row nowrap；
  88.              类推可得 : flex-flow：column wrap;
  89.         */
  91.         /*弹性盒子的 容器 具备的属性
  92.         4- align-items，属性容器内,项目之间交叉轴的对齐方向。
  93.             默认值： stretch，也就是在项目 会被拉伸到最高项目（子元素）的高度；
  94.             flex-start,交叉轴起始线；
  95.             center,居中；
  96.             flex-end,交叉轴终止线；
  97.         */
  98.         .container{
  99.             align-items: flex-end;
  100.         }
  101.     </style>
  103. </head>
  104. <body>
  105. <h2>flex 属性</h2>
  106. <div class="container">
  107.     <span class="item">1</span>
  108.     <span class="item">2</span>
  109.     <span class="item">3</span>
  110.     <span class="item">4</span>
  111. </div>
  112. </body>
  113. </html>

flex容器属性抄写

之前作业总结

昨天在线课程上，看完老师的实际编写过程，感觉思路很清晰。我自己在做的时候感觉定位很繁琐，尝试了几次都感觉没那么顺手。所以自己就在网上找了一些Gird布局的资料，也花了不少时间，将页面做了出来，完事以后自己感觉收获很多。
不过，老师亲自写完以后，发现自己对于定位这边理解还是不到位，需要在多练习理解一下，夯实基础知识。

上一条：弹性布局之弹性元素（第七章1105作业）-PHP培训九期线上班下一条：Linux交换空间
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多