旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

flex作用于box容器上的属性引见【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:66


导读:本篇文章给人人带来的内容是关于flex作用于box容器上的属性引见,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。1.flex-direction用于...
本篇文章给人人带来的内容是关于flex作用于box容器上的属性引见,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

1. flex-direction

用于指定flex主轴的方向,继而决议flex子项在flex容器中的位置

row,默认值,示意程度方向从左到右分列,此时程度方向为主轴
row-reverse,与row相反
column, 示意竖直方向从上到下分列,此时垂直方向为主轴方向
column-reverse,与column相反

2. flex-wrap

用于指定flex子项是不是换行

nowrap,默认值,示意不换行,flex子项可能会溢出
wrap,示意换行,溢出的flex子项会被换到下一行
wrap-reverse,示意反方向换行

3. flex-flow

相当于flex-direction和flex-wrap的兼并写法

4. justify-content

用于程度方向flex子项的对齐体式格局

flex-start,默认值,示意与行的肇端位置对齐
flex-end,示意与行的末端位置对齐
center,示意与行中心对齐
space-between,示意两头对齐,中心间距相称,注重特殊情况,当盈余空间为负数或许只要一个项时,结果和flex-start雷同
space-around,示意间距相称,中心间距是两头的两倍,注重特殊情况,当盈余空间为负数或只要一个项时,结果等同于center

5. align-items

用于垂直方向flex子项的对齐体式格局

stretch,默认值,当flex子项未设置高度或许高度为auto时,stretch起作用将flex子项高度设置为行高度,在只要一行的情况下,行的高度为容器的高度
flex-start,示意与侧轴最先位置对齐
flex-end,示意与侧轴末端位置对齐
center,示意与侧轴中心对齐

6. align-content

该属性只作用于多行的情况下,用于多行的对齐体式格局

stretch,默认值,当flex子项未设置高度或许高度为auto时,stretch起作用将flex子项高度设置为行高度,在只要一行的情况下,行的高度为容器的高度
flex-start,示意与侧轴最先位置对齐,紧靠侧轴最先位置,以后的每一行都紧靠前面一行
flex-end,示意与侧轴末端位置对齐,紧靠侧轴完毕位置,以后的每一行都紧靠前面一行
center,示意各行与侧轴中心对齐
space-between,示意两头对齐,中心间距相称,当盈余空间为负数或许只要一个项时,结果和flex-start雷同
space-around,示意间距相称,中心间距是两头的两倍,注重特殊情况,当盈余空间为负数或只要一个项时,结果等同于center

==该属性制造用于多行的情况下,在只要一行的容器上无效,该属性能够很好的处置惩罚航换以后相邻行之间的间距==

本篇文章到这里就已悉数完毕了,更多其他精彩内容能够关注ki4网的CSS3视频教程栏目!

以上就是flex作用于box容器上的属性引见的细致内容,更多请关注ki4网别的相干文章!

标签:css3