css中的flex布局

flex布局 任何一个容器都可以指定为flex布局 当父盒子设为flex布局后,子元素的float、clear、vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex的元素...

flex布局

任何一个容器都可以指定为flex布局

当父盒子设为flex布局后,子元素的float、clear、vertical-align属性将失效

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex的元素,称为Flex容器(flex container)简称”容器“。

它的所有子元素自动成为容器成员,成为Flex项目(flex item)简称“项目”

启用flex布局:给标签加上样式:display:flex;

如果没有设置,是没有flex布局的!!!!!

常见的父项属性:

1、flex-direction设置主轴方向

flex布局,分为主轴和侧轴方向也称行和列、x轴和y轴

默认主轴方向就是x方向,水平向右

默认侧轴方向就是y方向,水平向下

元素跟着主轴排列

属性值:row:默认,为水平方向,相当于float:left

row-reverse:水平反方向,相当于float:right,即从右到左

column:垂直方向,即从上到下

column-reverse:垂直反方向,即从下到上

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

使用该属性之前一定要确定好主轴方向

属性值:flex-start:默认值,从头部开始,如果主轴是x轴,则从左到右;如果主轴是Y轴,则从上到下

flex-end:从尾部开始排列,如果主轴是x轴,则子元素贴着右边,但是顺序不变 ,如果主轴是y轴,子元素就贴着下边

center:在主轴居中对齐(如果主轴是X轴则水平居中)

space-around:平分剩余空间,平分父元素的空间,每个子元素之间的间距一样

space-between:先两边贴边,再平分剩余空间:父元素里面的子元素两边贴着边缘,剩余的子元素平分剩下的空间

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

默认情况下,子元素是不换行的,如果父元素一行装不下,会缩小子元素的宽度,放到父元素空间里面。

属性值:nowrap:默认值,不换行

wrap:换行

4、align-items设置侧轴(默认侧轴为y轴)上的子元素排列方式(单行)

设置子项在侧轴上的排列顺序,用于子元素是单行的情况下,即子元素不换行

属性值:flex-start:默认值,从侧轴的头部开始排列

flex-end:从侧轴的尾部开始排列

center:在侧轴中垂直居中显示

stretch:拉伸:如果子元素设置高度,设置stretch就没有变化,只有当子元素没有设置高度或者高度等于auto时,子元素的高度会被拉伸到和父元素一样高

baseline:各个Flex Item相对于基线对齐。

A .若Flex Item内部没有任何文本内容,则Flex Item在Flex Container的顶端 且各个Flex Item之间底部对齐。 B .若Flex Item内部具备文本内容,则各个Flex Item相对于文本基线对齐

5、align-content 设置侧轴上的子元素的排列顺序(多行)

设置子项在侧轴上的排列顺序,只能用于多行的情况下,即子元素换行,在单行情况下没有效果

属性值:flex-start:默认值,从侧轴的头部开始排列

flex-end:从侧轴的尾部开始排列

center:在侧轴中垂直居中显示

space-around:子项在侧轴平分剩余空间

space-between:子项在侧轴先分布在两头,再平分剩余空间

stretch:设置子项元素高度平分父元素高度,跟单行效果差不多。如果子元素设置高度,设置stretch就没有变化,只有当子元素没有设置高度或者高度等于auto时,子元素才会平分父元素的高度

*****注意align-items和align-content的区别

flex-flow属性是flex-direction和flex-wrap属性的复合属性,相当于flex-direction和flex-wrap的简写

例如:flex-flow:row wrap;

子项常见属性

1、flex属性

定义子项目分配剩余空间,用flex来表示占多少份数

flex: <number>; // flex 的值是数字

flex:1;

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

align-self属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性

例如:align-self:flex-end;

3、order属性定义子项的排序顺序(前后顺序)

数值越小,排列越靠前,默认值为0

例如order: -1;

  • 发表于 2020-07-14 23:20
  • 阅读 ( 74 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除