Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML基础之Flex布局的基本理念和用法
Blogger Information
Blog 7
fans 0
comment 0
visits 9446
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
HTML基础之Flex布局的基本理念和用法
鼠莱鼠去
Original
1288 people have browsed it

flex 布局概述

1. flex 是什么

  • flex 是 Flexible Box 的缩写,意为弹性布局，用来为盒状模型提供最大的灵活性。
  • flex 2009 年就已出现,浏览器兼容性很好,请放心使用

2. flex 解决了什么问题

  • 块元素的垂直居中, flex 可以轻松解决
  • 元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

3. flex 项目的布局方向是什么

  • 一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想
  • flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直
  • flex 项目排列的方向, 称为主轴, 水平和垂直二种
  • 与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

4. flex 布局中常用术语有哪些(三个二)

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线与结束线(flex-start / flex-end)

5.flex 容器属性有以下6点

序号 属性 描述
1 flex-direction 设置容器中的主轴方向: 行/水平方向, 列/垂直方向
2 flex-wrap 是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行
3 flex-flow 简化 flex-direction, flex-wrap 属性
4 justify-content 设置 flex 项目在主轴上对齐方式
5 align-items 设置 flex 项目在交叉轴上对齐方式
6 align-content 多行容器中,项目在交叉轴上的对齐方式

6. flex 项目属性同样有以下6点

序号 属性 描述
1 flex-basis 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
2 flex-grow 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
3 flex-shrink 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
4 flex 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
5 align-self 单独自定义某个项目在交叉轴上的对齐方式
6 order 自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前

7. 示例代码

7.1 HTML 代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <title>CSS选择器测试DEMO</title>
  7.         <!-- 加载外部样式表 -->
  8.         <link rel="stylesheet" type="text/css" href="css/custom.css">
  9.     </head>
  10.     <body>
  11.         <header>
  12.             <div class="navbar">
  13.                 <div class="nav-log"><img src="img/logo.png" /></div>
  14.                 <nav id="main-menu" class="nav-bar">
  15.                     <ul>
  16.                         <li>首页</li>
  17.                         <li>关于</li>
  18.                         <li>博客</li>
  19.                         <li>新闻</li>
  20.                         <li>联系我们</li>
  21.                     </ul>
  22.                 </nav>
  23.             </div>
  24.         </header>
  25.         <main>         
  26.             <section class="item-flex-flow item-section">
  27.                 <h4>主轴方向与是否换行的简写:flex-flow</h4>
  28.                 <div class="item-lists">
  29.                     <div class="item-list">1</div>
  30.                     <div class="item-list">2</div>
  31.                     <div class="item-list">3</div>
  32.                     <div class="item-list">4</div>
  33.                 </div>
  34.             </section>
  35.             <section class="item-align-items item-section">
  36.                 <h4>容器交叉轴项目对齐:align-items</h4>
  37.                 <div class="item-lists">
  38.                     <div class="item-list">1</div>
  39.                     <div class="item-list">2</div>
  40.                     <div class="item-list">3</div>
  42.                 </div>
  43.             </section>
  44.             <section class="item-align-content item-section">
  45.                 <h4>多行容器交叉轴项目对齐:align-content</h4>
  46.                 <div class="item-lists">
  47.                     <div class="item-list">1</div>
  48.                     <div class="item-list">2</div>
  49.                     <div class="item-list">3</div>
  50.                     <div class="item-list">4</div>
  51.                 </div>
  52.             </section>
  53.             <section class="item-align-self item-section">
  54.                 <h4>项目交叉轴单独对齐:align-self</h4>
  55.                 <div class="item-lists">
  56.                     <div class="item-list">1</div>
  57.                     <div class="item-list">2</div>
  58.                     <div class="item-list">3</div>
  59.                     <div class="item-list">4</div>
  60.                 </div>
  61.             </section>
  62.             <section class="item-flex-grow item-section">
  63.                 <h4>项目放大因子:flex-grow</h4>
  64.                 <div class="item-lists">
  65.                     <div class="item-list">1</div>
  66.                     <div class="item-list">2</div>
  67.                     <div class="item-list">3</div>
  68.                     <div class="item-list">4</div>
  69.                 </div>
  70.             </section>
  71.             <section class="item-flex-shrink item-section">
  72.                 <h4>项目收缩因子:flex-shrink</h4>
  73.                 <div class="item-lists">
  74.                     <div class="item-list">1</div>
  75.                     <div class="item-list">2</div>
  76.                     <div class="item-list">3</div>
  77.                     <div class="item-list">4</div>
  78.                 </div>
  79.             </section>
  80.             <section class="item-flex-basis item-section">
  81.                 <h4>项目计算尺寸:flex-basis</h4>
  82.                 <div class="item-lists">
  83.                     <div class="item-list">1</div>
  84.                     <div class="item-list">2</div>
  85.                     <div class="item-list">3</div>
  86.                     <div class="item-list">4</div>
  87.                 </div>
  88.             </section>
  89.             <section class="item-flex item-section">
  90.                 <h4>flex 项目缩放简写</h4>
  91.                 <div class="item-lists">
  92.                     <div class="item-list">1</div>
  93.                     <div class="item-list">2</div>
  94.                     <div class="item-list">3</div>
  95.                     <div class="item-list">4</div>
  96.                 </div>
  97.             </section>
  98.         </main>
  99.     </body>
  100. </html>

7.2 CSS 代码

  1. * {padding: 0;margin: 0;border-radius: 0;}
  2. html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
  3. body{margin:0}
  4. article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
  5. .clearfix{overflow:hidden;clear:both;}
  6. /* header */
  7. /*采用Flex布局，flex-direction: row 主轴为水平方向，从左至右。 flex-wrap: nowrap 一条轴线排不下时，不换行*/
  8. .navbar{ display:flex; flex-direction: row; padding: 20px; flex-wrap: nowrap; }
  9. .nav-log{ margin-right: 10px; width: 30px; }
  10. .nav-log img{ width: 30px; }
  11. #main-menu{ max-width: 980px; width: 100%; margin: 0 auto; }
  12. /*采用Flex布局，justify-content: space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配*/
  13. #main-menu ul{ display: flex; list-style: none; justify-content: space-between; text-align: center; }
  14. /*采用Flex布局，flex-flow: row wrap 主轴为水平方向，从左至右；一条轴线排不下时，换行 */
  15. main{ display: flex; flex-flow: row wrap; }
  16. main section{ width: 220px; height: 200px; }
  17. main section .item-lists{ width: 220px; height: 200px; }
  18. main section .item-list{ width: 60px; height: 50px; background-color: lightblue; font-size: 2rem; border: 2px solid;}
  19. /*主轴方向与是否换行的简写:flex-flow 代码示例 flex-flow: row nowrap 为默认参数 */
  20. main .item-flex-flow .item-lists{ display: flex; /*flex-flow: row nowrap; flex-flow: column nowrap; flex-flow: column wrap;*/ flex-flow: row wrap;  }
  21. /*容器交叉轴项目对齐:align-items:center 代码示例 item-list在交叉轴的中点对齐*/
  22. main .item-align-items .item-lists{ display: flex; align-items: center; }
  23. /*多行容器交叉轴项目对齐align-content:space-around 代码示例 分散对齐: 剩余空间在每个项目二侧平均分配*/
  24. main .item-align-content .item-lists{ display: flex; flex-flow: row wrap; align-content: space-around; }
  25. /*在Flex环境下，`order`自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前：数字3排在最后。*/
  26. main .item-align-content .item-list:nth-child(3){ order: 2; }
  27. /*项目交叉轴单独对齐:align-self 可覆盖align-items属性*/
  28. main .item-align-self .item-lists{ display: flex; flex-flow: row wrap; align-items: center; }
  29. main .item-align-self .item-list:nth-child(2){ align-self: flex-end; }
  30. main .item-align-self .item-list:nth-child(3){ align-self: flex-start; }
  31. /*项目放大因子,项目的宽度扩展:flex-grow: 1 */
  32. main .item-flex-grow .item-lists{ display: flex; flex-flow: row wrap; }
  33. main .item-flex-grow .item-list:nth-child(3){ flex-grow: 1; }
  34. /*项目收缩因子,项目的宽度收缩:flex-shrink: 1*/
  35. main .item-flex-shrink .item-lists{ display: flex; flex-flow: row nowrap; }
  36. main .item-flex-shrink .item-list:nth-child(4){ flex-shrink: 4; }
  37. /*项目计算尺寸:flex-basis 该属性会覆盖项目原始大小(width/height)*/
  38. main .item-flex-basis .item-lists{ display: flex; flex-flow: row wrap; }
  39. main .item-flex-basis .item-list:nth-child(4){ flex-basis: 70px; }
  40. /*flex 项目缩放简写*/
  41. main .item-flex .item-lists{ display: flex; flex-flow: row wrap; }
  42. /*禁止放大,按计算大小填充到容器中*/
  43. main .item-flex .item-list:nth-child(3){ flex: 0 90px; }
  44. /*flex: 1 1 auto 项目自动放大或收缩适应容器*/
  45. main .item-flex .item-list:nth-child(4){ flex: 1 1 auto; }

7.3 效果图如下

8 学习总结

  1. 了解学习了flex的常用属性和作用方法。
  2. 了解flex在网页布局上的优点和灵活性。
  3. 了解flex与float在网页布局上的不同。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex是不是很香呢
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