移动web第四天:Flex布局

  • 更改主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向
通过flex-direction属性可以修改主轴方向

注意:
flex-direction: column;
把主轴方向变成了垂直方向,还是用jc控制主轴方向的对齐方式
把侧轴方向变成了水平方向,还是用ai控制侧轴方向的对齐方式
主轴和侧轴仅仅只是调换了方向而已

flex-direction的取值.jpg
  • 弹性盒子换行问题

弹性盒子换行显示: 弹性容器高度被换行的弹性盒子均等分
语法: flex-wrap: wrap;

弹性盒子多行显示的侧轴对齐方式:
属性: align-content
取值: 取值和jc取值是一样的,是针对于多行弹性盒子的侧轴设置的,出现的前提条件,必须要先换行 flex-wrap: wrap;

align-content取值范围:
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
提醒 : space-evenly需要手动输入,没有提示的

注意:
align-items 针对于单行弹性盒子的侧轴对齐方式

拓展

伪元素画竖线方法
1.要用子绝父相;
2.高度给竖线的高度,宽度给0
3.选择左或右边框,边框粗细为竖线的宽度

伪元素画横线方法
1.要用子绝父相;
2.高度给0,宽度给横线的宽度
3.选择上或下边框,边框粗细为横线的高度

  • 补充

1.单词

单词汇总.jpg

2.每日一句鼓励自己的话:

你可以成为你想要的样子,但你得努力

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容