实例演示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. 请注意，容器技术圈已迈入后Kubernetes时代！
  2. Docker_学习笔记系列之网络
  3. Docker_学习笔记系列之docker-compose
  4. Docker_学习笔记系列之容器
  5. Docker_学习笔记系列之镜像
  6. Docker_学习笔记系列之数据卷
  7. docker 学习第一节课
  8. 210329 CSS 媒体查询 grid布局
  9. Prometheus 之 所有业务容器指标的监控（即cadvisor数据）

随机推荐

  1. Android之输入银行卡号判断属于哪个银行
  2. Android app项目和开发总结
  3. 简单实现跑马灯
  4. Android 中文 API （16） —— AnalogClock
  5. RelativeLayout 相对布局属性
  6. android实现密码框右侧显示小眼睛
  7. 【整理】Android中EditText中的InputType
  8. GitHub 优秀的 Android 开源项目
  9. [置顶] Android屏幕适配全攻略(最权威的
  10. Android中Button控件Buttons in button b