小白的flex布局(笔记)

1布局模型

2.开启flex布局：
display:flex
3.父组件的布局

• List item – flex-direction的基本使用:
  flex-direction: row;默认值， 沿主轴main start从左向右排列；
  flex-direction: row-reverse; 沿主轴main start从右向左排列；
  flex-direction: column; 沿主轴main start从上向下排列；
  flex-direction: column-reverse; 沿主轴main start从下向上排列；

• List item – justify-content的基本使用：
  justify-content: flex-start; 与main-start对齐
  justify-content: flex-end; 与main-end对齐
  justify-content: center; 居中对齐
  justify-content: space-around; 边距是中间距离的一半
  justify-content: space-between; flex items之间的举例相等，且两端与main-start和main-end对齐
  justify-content: space-evenly; 边距水平平分

• List item – align-items的基本使用
  align-items: center; 沿cross轴居中
  align-items:flex-end; 沿cross轴居底部对齐
  align-items:flex-start; 默认沿cross轴居底部对齐
  align-items:baseline; 沿第一个文本下划线对齐

• List item – flex-wrap的使用
  flex-wrap: nowrap; 默认不换行
  flex-wrap: wrap; 换行

• List item – align-content的基本使用

使用条件：当排列的行数量等于或大于2时生效
align-content: flex-start; 与cross轴main-start对齐
align-content: flex-end; 与cross轴flex-end对齐
align-content: center; 与cross轴居中对齐
align-content：space-around; 边距是中间距离的一半
align-content：space-between; flex items之间的举例相等，且两端与cross-start和cross-end对齐
align-content：space-evenly; 边距水平平分

4.子组件的布局

• List item – flex-items-order的使用
  order的值越小排在前面，默认值为0；可以是负数，0跟整数

• List item – flex-items-align-self的使用

覆盖父元素设置的align-items: center;

• List item – flex-grow和flex-shrink的基本使用
  flex-grow是增长，flex-shrink是收缩
  根据数值是否大于1来设置每个item的成长值，设置的值乘以剩下的宽度；
  例如：1.父元素的宽度是400px，子元素是100px，设置 flex-grow: 0.1，则
  0.1*300=30，则子元素的宽度为100+30，如果是1就平分，n大于1就占n份。