Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局容器基本属性--- PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22253
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培训十期线上班
Miss灬懒虫
Original
700 people have browsed it

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布局的资料，也花了不少时间，将页面做了出来，完事以后自己感觉收获很多。
不过，老师亲自写完以后，发现自己对于定位这边理解还是不到位，需要在多练习理解一下，夯实基础知识。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：先把经典传统技术 先掌握吧, 什么flex, grid, 只是一种完成任何的快捷方式, 如果在一些极端环境下, 还得靠float+position
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