Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex盒模型
Blogger Information
Blog 6
fans 1
comment 0
visits 5725
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盒模型
xiaosheng
Original
1014 people have browsed it

flex盒模型

转换为盒模型 display:flex

  • 转换为盒模型后,子元素都转换为行内块元素
  • flex只有两级,父级和子级

排列方向 flex-direction

  • row : 表示水平排列
  • column : 表示垂直排列

换行 flex-wrap

  • nowrap : 不换行(默认)
  • wrap : 换行

flex-flow 上面两个的简写,第一个值是方向,第二值是换行

主轴对齐方式 justify-content

  • flex-start : 左对齐(默认)
  • flex-end : 右对齐
  • center : 居中

分配主轴上的剩余空间 justify-content

  • space-between : 将剩余的空间在中间分配(首尾没有)
  • space-around : 将剩余空间在所有的元素间平分,中间的空间是首尾的2倍
  • space-evenly : 将剩余空间在所有的元素间平分,但是所有元素的空间都相等

交叉轴的对齐方式(单行) align-items

  • flex-start : 顶部对齐(默认)
  • flex-end : 底部对齐
  • center : 中间对齐

分配交叉轴上的剩余空间(多行) align-content

  • space-between : 将剩余的空间在中间分配(首尾没有)
  • space-around : 将剩余空间在所有的元素间平分,中间的空间是首尾的2倍
  • space-evenly : 将剩余空间在所有的元素间平分,但是所有元素的空间都相等

代码演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             width: 600px;
  14.             height: 300px;
  15.             border: 1px solid red;
  16.             /*转换为盒模型*/
  17.             display: flex;
  18.             /*换行显示*/
  19.             flex-wrap: wrap;
  20.             /*水平排列*/
  21.             flex-direction: row;
  22.             /*将主轴剩余空间平均分配,所有元素的空间都相等*/
  23.             justify-content: space-evenly;
  24.             /*交叉轴上的排列方式(单行)*/
  25.             /*align-items: center;*/
  26.             /*多行*/
  27.             align-content: flex-start;
  28.         }
  29.         .item {
  30.             width: 100px;
  31.             height: 100px;
  32.             border: 1px solid purple;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <span class="item">1</span>
  39.         <span class="item">2</span>
  40.         <span class="item">3</span>
  41.         <span class="item">4</span>
  42.         <span class="item">5</span>
  43.         <span class="item">6</span>
  44.     </div>
  45. </body>
  46. </html>

手写笔记

  • 总结回顾:上节课的作业中,其中布局大的还可以,但是,在细小地方还存在混乱,不够清晰,在编写CSS的时候,条理尤为不清晰,浮动和定位功能在有些地方乱用,事先没有考虑好到底用哪种方法,太多重复的代码
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