首页 > 博客列表 > flex布局术语、容器、项目及案例

博主信息

博文 34

粉丝 0

访问量 29199

专题推荐

更多>

flex布局术语、容器、项目

主轴：元素排列
交叉轴：元素对齐
container可以用作其它元素的容器（块级盒子）
display:flex转为弹性盒子

容器属性：

1.flex-flow主轴方向是否换行
flex-flow：row nowrap主轴方向不允许换行
flex-flow:row wrap主轴方向允许换行

2.place-content容器中的剩余空间在项目中如何分配
2.1将所有项目看成一个整体，剩余空间在项目两边分配
place-content:start将所有剩余空间全部分到右边，所有项目从左边排列
place-content:end将所有剩余空间全部分到左边，所有项目从右边排列
place-content:center将所有剩余空间在项目中左右两边平均分配

2.2将所有项目看成一个独立的个体，剩余空间在项目之间分配
place-content:space-between两端对齐
place-content:space-around分散对齐
place-content:space-evenly平均对齐

3.place-items交叉轴上的对齐
place-items：stretch自动伸展
place-items:start上对齐
place-items:end下对齐

项目属性

1.flex(放大因子收缩因子计算宽度)
flex:0 1 auto(flex:initial)默认值
如果flex中自定义width,则flex.width>item.width
如果item设置了min-widtn,则min-width>flex.width>item.width

完全响应式：允许放大允许缩小宽度自动
flex:1 1 auto(flex:auto)
flex:1=flewx:1 1 auto(如果省去2，3值，则取默认值)

PC布局：完全失去响应，禁止放大和缩小
flex:0 0 auto(flex:none)

2.order改动项目在主轴上的排列顺序
order：0（默认值），值越小越靠前，支持负数

3.place-self控制某一个项目的对齐方式

案例：

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
          display: flex;
          height: 20em;
          border: 1px solid black ;
        }
        .container>.item{
            width: 10em;
            padding: 1em;
            background-color: aqua;
            border: 1px solid black;
        }
        .container{
            flex-flow:row nowrap
        }
    </style>
</body>

1.`flex-flow`属性

.container{
            flex-flow:row nowrap
        }

.container{
    flex-flow:row wrap
}

2.`place-content`属性

.container{
    flex-flow:row nowrap;
    place-content:start;
}

.container{
    flex-flow:row nowrap;
    place-content: end;
}

.container{
    flex-flow:row nowrap;
    place-content: center;
}

.container{
    flex-flow:row nowrap;
    place-content: space-between;
}

.container{
    flex-flow:row nowrap;
    place-content: space-around;
}

.container{
    flex-flow:row nowrap;
    place-content: space-evenly;
}

3.`place-items`属性

 .container{
     flex-flow:row nowrap;
     place-items:stretch;
 }

.container{
    flex-flow:row nowrap;
    place-items:start;
}

 .container{
     flex-flow:row nowrap;
     place-items:end;
 }

4.`flex`属性

.container>.item{
    /* width: 10em; */
    padding: 1em;
    background-color: aqua;
    border: 1px solid black;
    flex:auto;
}

5.`order`属性

 .container>.item:first-of-type{
     background-color: blue;
     order: 2;
 }

6.`place-self`属性

.container>.item:first-of-type{
    background-color: blue;
    order: 2;
    place-self: start;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法学习及代码展示

2022-07-02 17:47:31

flex布局术语、容器、项目

容器属性：

项目属性

案例：

1.flex-flow属性

2.place-content属性

3.place-items属性

4.flex属性

5.order属性