弹性盒子的属性~

弹性盒子

1.如果一个普通元素想成为弹性盒子元素,只需要给元素添加display:flex;

2.弹性盒子基本上是添加给父元素的,为的是让其中的子元素可以按照弹性盒子的规则进行布局,如果子元素中还有孙子元素需要按照弹性盒子的规则进行布局,那么子元素也要采用弹性盒子(添加display:flex;)

3.如果父元素添加了display:flex;属性,那么子元素中float,clear等属性无效

display: flex;

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

flex-direction: row;

/*

默认水平显示 row

如果改成垂直显示,垂直方向不够,等比例压缩

flex-direction: row | row-reverse | column | column-reverse;

row(横向,起点在左端)

*/

flex-wrap: nowrap;

/*水平方向换行方式,默认nowrap(不换行),如果显示不开,等比例压缩

flex-wrap: nowrap | wrap | wrap-reverse(换行,第一行在下方);

*/

justify-content: 定义了项目在主轴上的对齐方式。

flex-start(默认值):左对齐

flex-end:右对齐

center: 居中

space-between:两端对齐,项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items: 子元素的垂直对齐方式

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

注意:stretch属性的使用要求子元素没有默认高度

order

用来决定子元素的排列顺序,越小越靠前

flex-shrink:1;

/*空间不足时的压缩比例,默认为1,等比例压缩。如果一个元素不想等比例压缩,只需要给这个元素设置为0*/

/*flex-grow: 0;*/

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

/*剩余空间的分配比例,默认为0,不分配

  值越大,分配的比例越多*/

flex-basis:800px;

/*定义元素的基础宽度,如果还有剩余空间则所有元素均分剩余空间

如果空间不够,则等比例压缩其他元素*/

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

align-self: auto | flex-start | flex-end | center | baseline | stretch;

           

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值