实例演示flex容器中的四个属性的功能，参数，以及作用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>FLEX布局</title>
  8. </head>
  9. <style>
  10.     /* 初始化 */
  11.     *{
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.     }
  16.     :root{
  17.         font-size: 10px;
  18.     }
  19.     body{
  20.         font-size: 1.6rem;
  21.     }
  22.     .container{
  23.         /* 转化为flex容器 */
  24.         /* 自动成行内FLEX容器的项目，并且是行内块显示,项目与当前容器等高 */
  25.         display: flex;
  26.         height: 20rem;
  27.         border: 1px solid red ;
  28.     }
  29.     /* 1、单行容器 */
  30.     .container{
  31.         /* 主轴方向，默认水平，行方向 */
  32.         /* flex-direction: row; */
  33.         /* 禁止换行 */
  34.         /* flex-wrap: nowrap; */
  35.         /* 以上两个简化： */
  36.         /* flex-flow:主轴方向 是否换行 */
  37.         /* flex-flow:row nowrap; */
  38.     }
  39.     /* 2、多行容器 */
  40.     .container{
  41.         /* 允许换行 */
  42.         /* flex-flow: row wrap; */
  43.     }
  44.     .container{
  45.         /*  主轴垂直 不换行 */
  46.         /* flex-flow: column nowrap; */
  47.     }
  48.     .container{
  49.         /* 主轴垂直 换行 */
  50.         flex-flow:column wrap;
  51.     }
  53.     .container > .item{
  54.         padding: 1rem;
  55.         width: 30rem;
  56.         background-color: aquamarine;
  57.         border: 1px solid tomato;
  58.     }
  60. </style>
  61. <body>
  62.     <div class="container">
  63.         <div class="item">item1</div>
  64.         <div class="item">tem2</div>
  65.         <div class="item">iter3</div>
  66.         <div class="item">item4</div>
  67.         <div class="item">tem5</div>
  68.         <div class="item">iter6</div>
  69.         <div class="item">item7</div>
  70.         <div class="item">tem8</div>
  71.         <div class="item">iter9</div>
  72.     </div>
  73. </body>
  74. </html>

更多相关文章

  1. Android中的FILL_PARENT与WRAP_CONTENT的区别
  2. AndRoid完全退出程序
  3. Android(安卓)自定义水平滚动的容器
  4. 布局概述之相对布局RelativeLayout
  5. Android中使用ViewPager制作广告栏滚屏效果
  6. Android中使用ViewPager制作广告栏滚屏效果
  7. Android中使用ViewPager制作广告栏滚屏效果
  8. 从零开始打造一个Android(安卓)3D立体旋转容器
  9. 自定义View系列教程02--onMeasure源码详尽分析

随机推荐

  1. 我对学习delphiTeacher的《delphi调用及
  2. Android注解：自定义注解之源码注解
  3. android 通过占位符来动态获得字符串资源
  4. Android——多线程
  5. android环境变量的设置及注意问题
  6. Android中回调函数的理解---本人Android
  7. android:layout_gravity和android:gravit
  8. Android的BUG，一个频繁重启问题
  9. Android开发者e周报 第5期
  10. 转：Android前途分析