2020-08-24 学习笔记 p20-p27 弹性布局 移动端 响应式 苹果官网头部 响应式导航 苹果官网

弹性布局1  (p20)

相关参考文档资料：https://www.runoob.com/w3cnote/flex-grammar.html

弹性容器：      设置了display:flex   这个元素为弹性容器，里面的子元素会按照弹性布局的方式进行布局

弹性子元素： 设置了display:flex 的弹性容器的直接子元素即为弹性子元素

flex-direction 设置主轴的分布方向

• row（默认值）：主轴为水平方向，起点在左端。 （从左到右）
• row-reverse：主轴为水平方向，起点在右端。      （从右到左）
• column：主轴为垂直方向，起点在上沿。             （从上到下）
• column-reverse：主轴为垂直方向，起点在下沿。 （从下到上）

 

justify-content:主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-be