flex容器与项目的常用属性 - html

首页 > 博客列表 > flex容器与项目的常用属性

博主信息

博文 37

粉丝 0

访问量 44358

专题推荐

更多>

flex弹性盒元素

任何元素都可以通过”display:flex” 属性，转为弹性盒元素
转为flex元素后，他的内部的子元素就支持flex布局了
使用”display:flex” 属性的元素称为flex容器
flex容器中的子元素称为flex项目

容器中的项目自动转为行内块元素(不管之前是什么类型)

容器内子元素的排列方向

属性’flex-flow’控制轴方向与换行

<style>
 *{box-sizing:border-box;}
 .container{
     display:flex;
     height:15em;
     border:1px solid #000;
     padding:1em;
     margin:1em;
 }
 .container>.item{
     background-color:lightcyan;
     width:5em;
     height:5em;
     border:1px solid #000;
 }
 .container{
     <!--内部子元素排列方向，水平也就是主轴方向-->
     /*flex-direction:row;*/
     <!--是否换行-->
     /*flex-wrap:nowrap;*/
     <!--以上可以简写为 flex-flow-->
     flex-flow:row nowrap;
     /*水平方向row 垂直方向是column 换行wrap 不换行 nowrap*/
 }
</style>
<body>
 <div class="container">
     <div class="item">item1</div>
     <div class="item">item2</div>
     <div class="item">item3</div>
     <div class="item">item4</div>
 </div>
</body>

项目的对齐方式

justify-content:项目在主轴方向上的对齐方式
align-item:项目在交叉轴上的对齐方式
align-content:项目在多行容器上的对齐方式
主轴方向上的水平对齐方式
设置项目在单行容器主轴水平上的对齐前提：主轴上存在剩余空间。剩余空间分配的两种方案

.container{
        /* 1.将所有项目视为一个整体，在项目组两边进行分配 */
        <!--右对齐-->
          justify-content: flex-start;
          <!--左对齐-->
          justify-content: flex-end;
          <!--居中对齐-->
          justify-content: center;
          /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
          /* 两端对齐 第一个和最后一个不需要分配靠边对齐，中间的平均分配 */
          justify-content: space-between;
          /* 分散对齐 每个项目两边平均分配，相当于每个项目都有左右相等的margin值*/
          justify-content: space-around;
          /* 平均对齐 每个项目之间平均分配*/
          justify-content: space-evenly;
      }

交叉轴上的垂直对齐

     .container{
         /*默认，拉伸子元素*/
         align-items: stretch;
         /* 上对齐 */
         align-items: flex-start;
         /* 下对齐 */
         align-items: flex-end;
         /* 居中对齐 */
         align-items: center;
     }

多行容器上的对齐方式

多行容器可以设置主轴水平方向和交叉轴垂直方向上的对齐

    .container{
        /*多行容器*/
        flex-flow: rwo wrap;
        /* 项目组视为一个整体*/
        align-content: stretch;
        align-content: flex-end;
        align-content: flex-start;
        align-content: center;
         /*将项目组一行视为一个整体*/
        align-content: space-around;
        align-content: space-between;
        align-content: space-evenly;
    }

项目上的属性

flex属性

flex: flex:flex-grow flex-shrink flex-basis
flex:放大因子收缩因子项目在主轴上的基准宽度默认值就是设置的item宽度width:5em
默认上不放大可收缩 1是ture 0是false。
flex:0 1 auto;flex:initial;这俩的效果是一样的
flex:1 1 auto; flex:auto;可放大可收缩
如果只有一个数字，代表放大因子: flex:2;
注意：flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目。

<style>
.container .item:nth-of-type(2){
    flex:1 0 auto;
}
</style>

某个项目对齐方式

设置某个项目的对齐方式
align-self属性

   .container>.item:nth-of-type(2){
       align-self: stretch;
        /*上对齐*/
       align-self: flex-start;
       /*下对齐*/
       align-self: flex-end;
       /* 居中*/
       align-self: center;
   }

项目之间的排列顺序

默认是按照源码顺序排列的，谁写在前面谁就在前面。
order属性
order的值是数字，可以修改order的值来改变顺序位置，数字越小越靠前，越大越靠后。可以为负数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目顺序</title>
    <style>
      *{
          box-sizing: border-box;
      }
      .container{
          display: flex;
      }
      .container>.item{
          background-color:lightcyan;
          border: 1px solid #000;
          width: 5em;
      }
      .container>.item:nth-of-type(1){
          order: 1;
          order: 5;
          background-color: lightgreen;
      }
      .container>.item:nth-of-type(2){
          order:2;
          background-color: lightgray;
      }
      .container>.item:nth-of-type(3){
          order:3;
          order:0;
      }
      .container>.item:nth-of-type(4){
          order: 4;
          order: -1;
          background-color: yellow;
      }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">itme4</div>
</body>
</html>