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

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

flex-flow：主轴方向（row|colum） 是否换行（wrap|nowrap）

justify-content：项目在主轴上的对齐方式

align-items:项目在交叉轴上的对齐方式

align-content:项目在多行容器中的对齐方式

代码：
  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.     :root {
  11.       font-size: 10px;
  12.     }
  13.     * {
  14.       padding: 0;
  15.       margin: 0;
  16.       box-sizing: border-box;
  17.     }
  18.     html {
  19.       font-size: 16px;
  20.     }
  21.     .content,
  22.     .content2,
  23.     .content3,
  24.     .content4,
  25.     .content5,
  26.     .content6 {
  27.       display: none !important;
  28.     }
  29.     .content {
  30.       display: flex;
  31.       /* 主轴水平方向 不换行 */
  32.       flex-flow: row nowrap;
  33.     }
  34.     .content2 {
  35.       margin-top: 10rem;
  36.       display: flex;
  37.       /* 主轴垂直方向 不换行 */
  38.       flex-flow: column nowrap;
  39.     }
  40.     .content3 {
  41.       margin-top: 10rem;
  42.       display: flex;
  43.       /* 主轴水平方向 换行 */
  44.       flex-flow: row wrap;
  45.     }
  46.     .content4 {
  47.       margin-top: 10rem;
  48.       display: flex;
  49.       /* 主轴垂直方向 换行 */
  50.       flex-flow: column wrap;
  51.       height: 20rem;
  52.     }
  53.     .content .item,
  54.     .content2 .item,
  55.     .content3 .item,
  56.     .content4 .item,
  57.     .content5 .item,
  58.     .content6 .item,
  59.     .content7 .item {
  60.       height: 5rem;
  61.       padding: 1rem;
  62.     }
  64.     .content5 {
  65.       display: flex;
  66.       /* 位于容器开头 */
  67.       justify-content: flex-start;
  68.       /* 位于容器的结尾 */
  69.       justify-content: flex-end;
  70.       /* 位于容器中间 */
  71.       justify-content: center;
  72.       /* 分散对齐 */
  73.       justify-content: space-around;
  74.       /* 两端对齐 */
  75.       justify-content: space-between;
  76.       /* 平均对齐 */
  77.       justify-content: space-evenly;
  78.     }
  80.     .content6 {
  81.       display: flex;
  82.       height: 20rem;
  83.       /* 默认会充满单行容器的高度 */
  84.       align-items: stretch;
  85.       /* 交叉轴的起点对齐 */
  86.       align-items: flex-start;
  87.       /* 交叉轴的终点对齐 */
  88.       align-items: flex-end;
  89.       /* 交叉轴的中点对齐 */
  90.       align-items: center;
  91.     }
  93.     .content7 {
  94.       display: flex;
  95.       height: 20rem;
  96.       flex-flow: row wrap;
  97.       /* 与交叉轴的起点对齐 */
  98.       align-content: flex-start;
  99.       /* 与交叉轴的终点对齐 */
  100.       align-content: flex-end;
  101.       /* 与交叉轴的中点对齐 */
  102.       align-content: center;
  103.       /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
  104.       align-content: space-between;
  105.       align-content: space-around;
  106.       align-content: stretch;
  107.     }
  108.   </style>
  109.   <body>
  110.     <!--  主轴水平方向 不换行  -->
  111.     <div class="content">
  112.       <div class="item">item1</div>
  113.       <div class="item">item2</div>
  114.       <div class="item">item3</div>
  115.       <div class="item">item4</div>
  116.     </div>
  117.     <!-- 主轴垂直方向 不换行  -->
  118.     <div class="content2">
  119.       <div class="item">item1</div>
  120.       <div class="item">item2</div>
  121.       <div class="item">item3</div>
  122.       <div class="item">item4</div>
  123.     </div>
  124.     <!-- 主轴水平方向 换行  -->
  125.     <div class="content3">
  126.       <div class="item">item1</div>
  127.       <div class="item">item2</div>
  128.       <div class="item">item3</div>
  129.       <div class="item">item4</div>
  130.       <div class="item">item5</div>
  131.       <div class="item">item6</div>
  132.       <div class="item">item7</div>
  133.       <div class="item">item8</div>
  134.       <div class="item">item9</div>
  135.     </div>
  136.     <!-- 主轴垂直方向 换行  -->
  137.     <div class="content4">
  138.       <div class="item">item1</div>
  139.       <div class="item">item2</div>
  140.       <div class="item">item3</div>
  141.       <div class="item">item4</div>
  142.       <div class="item">item5</div>
  143.       <div class="item">item6</div>
  144.       <div class="item">item7</div>
  145.       <div class="item">item8</div>
  146.       <div class="item">item9</div>
  147.     </div>
  149.     <!-- justify-content 属性 项目在主轴上的对齐方式  -->
  150.     <div class="content5">
  151.       <div class="item">item1</div>
  152.       <div class="item">item2</div>
  153.       <div class="item">item3</div>
  154.       <div class="item">item4</div>
  155.       <div class="item">item5</div>
  156.     </div>
  158.     <!-- align-items属性 项目在交叉轴上的对齐方式  -->
  159.     <div class="content6">
  160.       <div class="item">item1</div>
  161.       <div class="item">item2</div>
  162.       <div class="item">item3</div>
  163.       <div class="item">item4</div>
  164.       <div class="item">item5</div>
  165.     </div>
  167.     <!-- align-content属性 项目在多行容器中的对齐方式  -->
  168.     <div class="content7">
  169.       <div class="item">item1</div>
  170.       <div class="item">item2</div>
  171.       <div class="item">item3</div>
  172.       <div class="item">item4</div>
  173.       <div class="item">item5</div>
  174.       <div class="item">item6</div>
  175.       <div class="item">item7</div>
  176.     </div>
  177.   </body>
  178. </html>

更多相关文章

  1. flex容器属性的功能，参数，以及作用
  2. css-flex布局
  3. 3.24实例演示flex容器中的四个属性的功能，参数，以及作用
  4. css之flex容器
  5. 0324作业-flex布局
  6. flex布局：flex容器中的四个属性的功能，参数，以及作用
  7. 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式
  8. flex 基础
  9. grid对齐方式以及简单实战

随机推荐

  1. sql 如何对返回为空值指定值
  2. python操作mysql 抛出Unread result foun
  3. MySQL5.7.11版本，64位绿色版安装
  4. 'where'in with duplicates或'select dis
  5. 使用触发器插入另一个表
  6. ASP和SQLServer时间处理方法
  7. 检查mysql中的行顺序
  8. 请大家帮我解决一下MySQL已经都设置成UTF
  9. 50分求关于执行SQL脚本文件的问题，在线等
  10. mysql数据库基本操作指南