flex容器(常用属性)的理解 - css

首页 > 博客列表 > flex容器(常用属性)的理解

博主信息

博文 49

粉丝 0

访问量 47834

专题推荐

更多>

flex弹性盒布局:

任何元素都可以通过添加display:flex属性,转为弹性盒元素,
转为flex元素后,它的内部的"子元素"就支持flex布局了
只要使用了display: flex属性的元素就称为:(flex容器)
flex容器中有"子元素"称之为:flex项目
容器中的项目自动转为"行内块元素"(不管之前是什么类型)
容器默认存在两根轴:水平方向(主轴) 与 垂直方向的(交叉轴)

容器属性:

flex-direction: 决定主轴的方向默认值, row(水平方向) 与 colum(垂直方向)
flex-wrap: 决定不换行, 默认值nowrap(不换行) 与 wrap(换行)
justify-content:定义了项目在主轴上的对齐方式
flex-start: (默认值)左对齐, flex-end: 右对齐, center: 居中, space-between: 两端对齐, space-around: 分散对齐, space-evenly: 平均对齐,
align-items: 定义项目在交叉轴上如何对齐
stretch:默认拉伸, flex-start:交叉轴的起点对齐, flex-end:交叉轴的终点对齐, center:交叉轴的中点对齐,
align-content:性定义了多根轴线的对齐方式
stretch(默认值):轴线占满整个交叉轴 flex-start:与交叉轴的起点对齐 flex-end:与交叉轴的终点对齐 center:与交叉轴的中点对齐 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布 space-around:每根轴线两侧的间隔都相等

项目属性:

flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征
flex-grow:放大因子 flex-hrink收缩因子 flex-basis:项目在主轴上的基准宽度
flex:0 1 auto;默认就会不放大或收缩 flex:1 1 auto;允许放大和收缩 flex:0 0 auto;禁止放大或收缩
order 设置某个项目在主轴上的排列顺序 数值越小,排列越靠前,支持负值
align-self: 定义某个项目的对齐方式

演示代码:

//justify-content: 定义了项目在主轴上的对齐方式
 *{
            //转为IE盒子
            box-sizing: border-box;
        }
        .index{
            //转换为felx弹性布局元素
            display: flex;
            height: 15em;
            border: 1px solid rgb(0, 0, 0);
            padding: 1em;
            margin: 1em;
        }
        .index>.box{
            width: 4em;
            height: 5em;
            background-color: lightsalmon;
            border: 3px solid #000;
        }
        .index{
            //简写默认值
            flex-flow: row nowrap;
             //(默认值)左对齐
             justify-content: flex-start;
             //右对齐
             justify-content: flex-end;
             //居中
             justify-content: center;
             //两端对齐
             justify-content: space-between;
             //分散对齐
             justify-content: space-around;
             //平均对齐
              justify-content: space-evenly;
        }
</style>
<body>
    <div class="index">
        <div class="box">早上</div>
        <div class="box">中午</div>
        <div class="box">傍晚</div>
        <div class="box">晚上</div>
    </div>
</body>

效果:

<style>
        *{
            //转为IE盒子
            box-sizing: border-box;
        }
        .index{
            //转换为felx弹性布局元素
            display: flex;
            height: 15em;
            border: 1px solid rgb(0, 0, 0);
            padding: 1em;
            margin: 1em;
        }
        .index>.box{
            width: 3em;
            background-color: lightsalmon;
            border: 3px solid #000;
        }
 //align-items: 定义项目在交叉轴上如何对齐
        .index{
            //默认拉伸
            align-items: stretch;
            //交叉轴的起点对齐
            align-items: flex-start;
            //交叉轴的终点对齐
            align-items: flex-end;
            //交叉轴的中点对齐
            align-items: center;
      }
    //改变元素顺序
   .index>.box:nth-of-type(3){
        order: 1;
      }
</style>
<body>
    <div class="index">
      <div class="box">早上</div>
      <div class="box">中午</div>
      <div class="box">傍晚</div>
      <div class="box">晚上</div>
      <div class="box">半夜</div>
    </div>
</body>