ASCII码 ASCII码

CSS: flex布局：容器上的属性

发布于：2022-05-23 17:27:39  栏目：技术文档

  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. <body>
  11.     <div class="container">
  12.         <div class="item">item1</div>
  13.         <div class="item">item2</div>
  14.         <div class="item">item3</div>
  15.     </div>
  17.     <style>
  19.         *{
  20.             margin: 0;
  21.             padding: 0;
  22.             box-sizing: border-box;
  23.         }
  24.         /* flex容器 */
  25.         .container{
  26.             display: flex;
  27.             height: 20em;
  28.             border: 1px solid #000;
  29.         }
  31.         .container > .item{
  32.             /* flex容器中的“子元素”则成了“弹性项目/flex项目” */
  33.             width:10em;
  34.             padding: 1em;
  35.             height: 10em;
  36.             background-color: lightcyan;
  37.             border: 1px solid #000;
  38.         }
  40.         .container{
  41.             /* 1  用在容器中的属性 */
  42.             /* flex-direction: row;  */
  43.             /* 默认 */
  44.             /* flex-direction: column; */
  45.             /* flex-wrap: wrap; */
  46.             /* flex-flow: row wrap; */
  47.             /* 是否允许换行 */
  48.             flex-flow: row nowrap;
  51.             /* 2  剩余空间的设置 */
  52.             /* place-content: start;
  53.             place-content: end; */
  54.             /* place-content: center center; */
  55.             /* 两端对齐 */
  56.             /* place-content: space-between;
  57.             /* 分散对齐 */
  58.             /* place-content: space-around; */
  59.             /* 平均对齐 */
  60.             /* place-content: space-evenly; */
  63.             /* 3 垂直轴的对齐 */
  64.             place-items: stretch;
  65.             place-items:start;
  66.             place-items:end;
  67.             place-items:center;
  70.             /* flex容器只需要记住三个属性 */
  71.             /* 1. flex-flow 主轴方向，换行
  72.             2. place-content: 项目在主轴上的排列与空间分配;
  73.             3.place-items项目在交叉轴上的对齐 */
  75.         }
  77.     </style>
  80. </body>
  81. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行