Flex学习

flex布局

一、了解flex

1.flex是什么？

• flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2.flex的作用是什么？

• flex弹性盒子的作用是快速定位元素的位置和设置元素大小，适配不同屏幕宽度，最适合移动端。

二、介绍属性

1.flex 父容器属性

/*Flex容器属性 （父容器属性）*/
.parent{
  display:flex;
  /* 改变主轴方向 */
  flex-direction:row;
  /* 子元素超出是否|如何换行 */
  flex-wrap: wrap;
  /* 前俩个属性结合 */
  flex-flow: column wrap;
  /* 子元素在主轴的对其方式和分布 */
  justify-content: left;
  /* 交叉轴子元素对其方式 和分布*/
  align-items: center;
}

2.flex 子元素属性

.child{
  /* 定义子元素排列顺序 值越小越靠前*/
  order: 0;
  /* 确定子元素的放大比例 */
  flex-grow:0;
  /* 确定子元素的缩放比例 */
  flex-shrink:1;
  /* 在分配多余空间之前，子元素占据主轴空间 */
  flex-basis: 1;
  /* 上面三个属性合并 */
  flex:1;
  /* 该子元素和其他子元素不同的排列方式 */
  /* 继承 */
  align-self:auto;
}

三、示例展示