flex弹性盒模型

flex弹性布局为容器，容器的”子元素”为项目；容器拥有主轴和交叉轴，采用flex布局后，内部盒子的宽高可以自动适应。

flex模块化

模块描述
容器具有display:flex属性元素
项目flex容器的”子元素”
主轴项目排列的轴线
交叉轴与主轴垂直的轴线

容器

属性值
flex-flow主轴方向与换行方式
justify-content项目在主轴上的对齐方式
align-items项目在交叉轴上的对齐方式
align-content项目在对行容器中的对齐方式

2.1 flex-flow

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>弹性项目在主轴的排列方式</title>
  7.     <style>
  8.         *{
  9.             box-sizing: border-box;
  10.         }
  11.         .container{
  12.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             border: 1px solid #333;
  15.             margin: 1em;
  16.             padding: 1em;
  17.         }
  18.         .container .item{
  19.             background-color: lightgreen;
  20.             height: 5em;
  21.             width: 5em;
  22.             border: 1px solid #333;
  23.             text-align: center;
  24.         }       
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="container">
  29.         <div class="item">item1</div>
  30.         <div class="item">item2</div>
  31.         <div class="item">item3</div>
  32.         <div class="item">item4</div>
  33.         <div class="item">item5</div>
  34.         <div class="item">item6</div>
  35.         <div class="item">item7</div>
  36.         <div class="item">item8</div>
  37.     </div>
  38. </body>
  39. </html>

  • 当flex为单行容器

    1. /* 单行容器 */
    2. .container{
    3.   flex-flow: row nowrap;
    4. }

  • 当flex为多行容器

    1. /* 多行容器；一行显示不下，即可换行显示 */
    2. .container{
    3.   flex-flow: row wrap;
    4. }

    弹性盒子

  • 当flex容器为垂直，并且不换行

    1. .container{
    2.    flex-flow: column nowrap;
    3. }

    弹性布局

  • 当flex容器为垂直，并且换行

    1. .container{
    2.   height: 15em;
    3.   flex-flow: column wrap;
    4. }

    弹性布局

更多相关文章

  1. LayoutInflater(布局服务)
  2. Android学习笔记(13):帧布局FrameLayout
  3. Android对View的onMeasure方法理解
  4. 如何在Android5.1系统上实现RecyclerView高度自适应
  5. Android自定义控件之测量onMeasure
  6. Android新布局ConstraintLayout的使用
  7. 线性布局 LinearLayout
  8. Java序列化反序列化、Serializable、Parcelable 知识总结
  9. Android使用七牛上传图片踩坑及解决方案

随机推荐

  1. Mybatis框架如何使用分页插件呢？
  2. ES11 来了，还学得动吗？
  3. 基于SSH框架实现的驾校管理系统
  4. 移动端跨平台技术之下的变与不变
  5. Fast Refresh 原理剖析
  6. 从0开始搭建数据仓库(2)：产品经理如何“玩
  7. 图解 *** 等 6 种前端渲染模式
  8. Hot Reload 究竟是怎么实现的？
  9. low-code？与 20 年前的 Dreamweaver 有什
  10. 如何扩展 VSCode JSON 智能提示？