css弹性布局常见属性总结

      发布在:前端技术      评论:0 条评论


常见父项属性

flex-direction:设置主轴的方向

flex-direction属性值有row(默认值从左到右),row-reverse(从右到左),column(从上到下),column-reverse(从下到上)

justify-content:设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式,我们需要在使用之前确定好主轴是哪个

justify-content属性值有flex-start(默认值从头部开始,如果主轴是X轴,则从左到右),flex-end(从尾部开始排列),center(在主轴居中对齐,如果主轴是X轴则水平居中)

space-around(平分剩余空间),space-between(先两边贴边,再平分剩余空间)

flex-wrap:设置子元素是否换行

flex-wrap属性值nowrap(默认值不换行),wrap(换行)

align-items:设置侧轴上的子元素的排列方式(单行)

该属性是控制子项在侧轴(默认是Y轴)上的排列方式,在子项为单项的时候使用。属性值有flex-start(默认值侧轴从上到下),flex-end(侧轴从下到上),center(挤在一起居中,侧轴垂直居中),stretch(侧轴拉伸)

align-content:设置侧轴上的子元素的排列方式(多行)

该属性设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行!!!),在单行下没有效果

QQ图片20200819190824

flex-flow:复合属性,相当于同时设置flex-direction和flex-wrap

常见子项属性

flex: 子项目占的份数

flex属性定义子项目分配剩余空间,用flex来表示占多少份。默认为0

align-self: 控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值是auto,表示继承父元素的align-items属性。如果没有父元素,则等同于stretch。

order:定义子项的排列顺序(前后顺序),数值越小,排列越靠前,默认为0。


flex布局兼容性写法

CSS样式

  • flex:定义布局为盒模型

  • flex-v:盒模型垂直布局

  • flex-1:子元素占据剩余的空间

  • flex-align-center:子元素垂直居中

  • flex-pack-center:子元素水平居中

  • flex-pack-justify:子元素两端对齐

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.flex-v {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

横向垂直居中flex写法

.v-center{display:flex;align-items: center;justify-content:center;}


相关文章
热门推荐