flex布局原理
flex是flexible Box的缩写,意为‘弹性布局’,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex
1.当我们给父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素,称为flex容器,简称‘ 容器 ’,它的所有子元素自动成为容器成员,称为flex项目,简称 项目 ‘,
总结flex布局原理:
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局父项常见属性
以下6个属性是对父元素设置的
1.flex-direction:设置主轴的方向
主轴和侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
1.默认主轴就是x轴方向,水平向右
2.默认的侧轴方向是y轴,水平向下
属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值 | 说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右到左 |
colum | 从上到下 |
colum-reverse | 从下到上 |
2.justify-content:设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 | 说明 |
---|---|
flex-start | 默认值从头开始,如果主轴是x轴,则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是x轴,则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边,在平分剩余空间(重要) |
3.flex-wrap:设置子元素是否换行
默认情况下,项目都在排在一条线上(又称’轴线’)上,flex-wrap属性定义,flex布局中默认是不换行的
属性值 | 说明 |
---|---|
nowrap | 默认值,不换行 |
wrap | 换行 |
4.align-content:设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况下(多行),在单行下是没有效果的
属性值 | 说明 |
---|---|
flex-start | 默认值在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,在平分剩余空间 |
stretch | 设置子元素高度平分父元素高度 |
5.align-items:设置侧轴上的子元素排列方式(单行)
该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项(单行)的时候使用
属性值 | 说明 |
---|---|
flex-start | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸(在子元素不设置高度的情况为默认值) |
6.flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
flex布局子项常见属性
flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
item{
flex:<number>;//default 0
}
align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
span:nth-child(2){
//设置自己在侧轴上的排列方式
align-self:flex-end;
}
order属性定义子项的排列方式(前后顺序)
数值越小,排列越靠前,默认为0
注意:和z-index不一样
qq_42802170 发布了26 篇原创文章 · 获赞 1 · 访问量 622 私信 关注原文地址:https://blog.csdn.net/qq_42802170/article/details/103956235
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。