移动WEB-03

一. fiex 布局

justify-content 用来定义主轴子项的对齐方式

1.flex-start : 从行首位置开始排列

2.flex-end: 从行尾位置开始排列

3.center 居中

4.space-between:均匀排列每个元素 首个元素放置于起点,末尾元素放置于终点. {sb: 元素贴两边} 5.space-around: 均匀排列每个元素,每个元素周围分配相同的空间 {sd:两侧空间小} 6.space-evenly: 均匀排列每个元素,每个元素之间的间隔相等 {sv:看见空间都相等}

二. 父相身上的属性 常见的4个属性

1. justify-content:设置主轴子项的对齐方式 {水平方向}

2. align-items:设置侧轴子项的对齐方式 {垂直方向}

3. flex-direction: 设置主轴和侧轴的方向

4. flex-wrap/nowarp: 设置换行/不换行

三. 水平方向的行和列 (主轴)

1. flex-direction:row; 水平方向 行

2. flex-direction:column; 垂直方向 列

(侧轴)

1. 单行 align-items:center;

2. 多行 align-contens

ps:flex存在两个方向-两个轴,分布为主轴和侧轴

当主轴是水平方向,侧轴为垂直方向时 flex-direction:row;

1: 子项默认的宽度内容撑开, 高度等于父项的高度 2: justify-content 设置的主轴方向对齐 水平 3: align-items 设置 侧轴方向对齐 垂直

当我们修改了主轴方向 当主轴是垂直 侧轴是水平时 flex-direction:column;

1.子项默认的宽度=父项的宽度
高度=内容撑开

2.justify-content 主轴 垂直

3.align-items 侧轴 水平

四 子项

1. flex:1; 设置子项占父项剩下的宽度的比例

2. 设置子项自己在侧轴上的对齐 align-self { 1.flex-start 2.flex-end 3.center
   } 3.了解设置子项在主轴上的排列顺序 order { 1 默认值是 0 2 值越小 越靠前 }

4.子项的默认情况

一.默认的宽度和高度
  (
  1.宽度有内容撑开
  2.高度等于父项高
  )
  
  二.设置宽度和高度 
  (
  1.不区分行内,行内块 都可以设置宽度和高度
  )
  
  三.能否适用于传统布局,不建议使用
  (
  1.浮动 无效
  
  2.定位 有效
  
  3.外边距 有效
  )