flex详解

flex 弹性布局

1flex 和传统布局的区别

• 传统布局优点: 兼容性好缺点: 繁琐

• flex布局:优点:简单方便缺点:兼容性不好 主要用在移动端

• 在flex布局中

  • 有两个轴

    • 主轴

    • 侧轴

    • 默认情况下主轴的方向=X 轴 从左往右侧轴的广告= Y轴 从上到下

2 使用布局

2.1 flex-direction:

• 设置主轴方向 要父项样式设置

有些属性 可以给父项设置

主轴的方向：

  /*父项*/
div{
  /* 父项 伸缩布局 */
   display:flex;
  /*设置主轴的方向*/
  flex-direction:row;
}
/*子项*/
span{
  写自己的样式
}
主轴的方向:
 flex-direction:
    row 从左到右 常用
    row-reverse 右到左
    column 从上到下 常用
    column-reverse 从下到上

2.2 Jusetify-content

主轴子项的对齐方式

/*父项*/
div{
  /*伸缩布局*/
  display:flex;
  /*设置主轴子项的对齐方式*/
  justify-content:space-around;/*空白环绕 子项平分空间*/
}
/*子项*/
span{
  width:100px;
  height:100px;
}
主轴子项的对齐方式:
jusetify-content:
    flex-start: 左对齐
    flex-end: 右对齐
    center: 居中
    space-between: 先两边 剩下 再平分剩余空间
    space-around: 空白环绕 子项平分空间

2.3 align-items

侧轴子项的对齐方式(单行)

/*父项*/
div{
  /*伸缩布局*/
  display:flex;
  /*设置侧轴子项的对齐方式(单行)*/
  align-items:flex-end;/*下对齐*/
}
/*子项*/
span{
  width:100px;
  height:100px;
}
侧轴子项的对齐方式(单行):
align-items:
   flex-start: 上对齐
   flex-end: 下对齐
   center:居中对齐

2.4 align-content

• 多行环境下

  • align-items： 有效果 (有些效果不清晰)

  • align-content: 有效果

• 单行环境

  • align-items: 有效果(正常)

  • align-content: 没有效果

• 总结:1 单选 align-items​ flex-start flex-end​ center2 多行 align-content​ flex-start​ flex-end

  ​ center​ space-around​ space-between3 只要是关于侧轴的设置​ 统统都是align 开头的

侧轴子项的对齐方式(多行)

 /*父项*/
div{
  /*伸缩布局*/
  display:flex;
  /*设置侧轴子项的对齐方式(多行)*/
  align-content:flex-end;/*下对齐*/
}
/*子项*/
span{
  width:100px;
  height:100px;
}
侧轴子项的对齐方式(多行):
align-content:
   flex-start: 上对齐
   flex-end: 下对齐
   center:居中对齐
   space-between: 先两边 剩下 再平分剩余空间
   space-around: 空白环绕 子项平分空间

2.5 flex-wrap 换行

换行

 /*父项*/
div{
  /*伸缩布局*/
  display:flex;
  /*设置换行*/
  flex-wrap:wrap;/*换行*/
}
/*子项*/
span{
  width:100px;
  height:100px;
}
父项换行
flex-wrap:
    wrap:换行
    nowrap:不会换行  默认值

3子项

3.1 flex

设置子项占父元素的宽度的份数

flex 不要和一些属性同时出现

​ width

​ 父项不要出现换行

/*父项*/
div{
  width:100px;
  height:200px;
  /*父项 伸缩*/
  display:flex;
  /*换行*/
  flex-wrap:wrap;
}
/*子项*/
a{
  /*设置子项占父元素的宽度的份数*/
  flex:1;
  height:100%;
  background-color:red;
}
a:nth-child(3){
  flex:3;/*占父元素的宽度3份数*/
}

3.2 align-self

设置子项自己在侧轴上的对齐的方式

/*父项*/
div{
  width:100px;
  height:200px;
  /*父项 伸缩*/
  display:flex;
}
/*子项*/
span{
  width: 80px;
  height: 80px;
  background-color: palegreen;
  border: 1px solid #000;
}
span:nth-child(2){
  align-self:center;
}
span:nth-child(4){
  align-self:flex-end;
}
设置子项自己在侧轴上的对齐的方式
align-self:
    flex-start: 上对齐
    flex-end: 下对齐
    center:居中对齐

 

其他

1 父项添加display:flex 不会影响布局2 子项可以直接添加宽度高度3 子项 加浮动 没有效果 一般不用4 子项加定位 有效果 一般不用5 子项 默认的宽度是 由内容撑开 高度 默认 和父元素等高(继承父元素的高)6 子项也是可以作为父项的

/*父项*/ 
div{
   width: 400px;
   height: 400px;
   background-color: salmon;
   margin: 100px auto;
   /* 把div变成伸缩盒子 */
   display: flex;
}
/*子项*/
span{
  width: 100px;
  height: 100px;
  /* position: absolute;//定位有效果 */
  /* float: right;浮动没有效果 */
  /* position: absolute; 定位有效果 一般不会这样的用法 */ 
  background-color: palegreen;
}