发表于: 2018-12-15 22:17:17

1 669


今天完成的事情:学习了弹性盒子


明天计划:做任务四,多练习使用form标签好input标签。


遇到问题:暂时没有


收获:(记录一些弹性盒子的属性),自己只用到justify-content, align-items这两个属性。

弹性盒子简绍:弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

一、容器的属性:

1、flex-direction 主轴方向,可取四个值

2、flex-wrap:项目排列方式 3个值3

3、flex-flow 前两项的缩写:默认row nowrap

4、justify-content:项目在主轴上对齐方式 5个值

5、align-items:项目在交叉轴上如何对齐

6、align-content:多根轴线对齐方式,只有一根时,该属性不起作用。 6个值


二、项目属性

1、order项目的排列顺序 默认值0

2、flex-row项目放大比例 默认值 0 

3、flex-shrink项目缩小比例 默认1

4、flex-basis分配多余空间之前,项目占的主轴空间 默认auto

5、flex是2-4的缩写 默认0 1 auto,后两项可选,建议必填

6、aglin-self允许单个项目有与其它项目不一样的对齐方式 默认auto


 


返回列表 返回列表
评论

    分享到