1.今天上午学习了弹性盒子,弹性盒子又称Flex布局,是CSS中的又一种手段。它主要用来代替浮动来完成页面的布局,flex可以使元素具有弹性,让元素可以根据页面的大小的改变而改变。
2.要使用弹性盒子,必须先将一个元素设置为弹性容器。通过display来设置弹性容器(display:flex),弹性容器的直接子元素是弹性元素。总结就是:通过设置父元素的弹性布局,调整子元素的对齐方式和布局。
3.弹性盒子的六个容器属性
- flex-direction 决定主轴方向(即项目的排列方向)
- flex-wrap 决定如果一条轴线排不下,是否换行
- flex-flow 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
- justify-content 定义了项目在主轴上的对齐方式(必须要先确定好主轴是哪个)
- align-items 定义项目在交叉轴(侧轴)上如何对齐。注意:该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项目上为单项( 单行)的时候使用
- align-content 定义了多根轴线的对齐方式(子项出现换行的情况)
4.第二个项目完成了,在8月5号以前还能完善。看了别的同学的项目 ,和优秀同学差距有点大。
- 我的
- 同学的
慢慢来吧