css - flex 弹性布局

弹性布局：

如何一个容器都可以指定为弹性布局，当我们为父盒子设置为弹性布局之后，子元素的float，clear，vertical-align属性将失效

通过给父元素设置flex属性，来控制子盒子的排列方式与位置

 

flex父项属性：

1.flex-direction - 设置子元素的排列方向(设置主轴x或者是y)

属性值	说明
row	(默认值)从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

  <style>
      .father {
          display: flex;
          flex-direction: row(默认值);
      }
  </style>

 

2.justify-content - 设置子元素的排列方式，是根据主轴排列的，x或者是y(类似于浮动，但比浮动更高级)

属性值	说明
flex-start	(默认值) 从头部开始排列
flex-end	从尾部开始排列
center	居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

      .father {
          display: flex;
          justify-content: flex-start(默认值);
      }

 

3.flex-wrap - 设置子元素是否换行，默认不换行，宽度不够会缩小子元素的宽度

属性值	说明
nowrap	(默认值)不换行
wrap	换行

      .father {
          display: flex;
          flex-wrap: nowrap(默认值);
      }

 

4.align - 设侧轴的排列方式

align-items单行起作用的属性(flex-wrap：nowrap)

属性值	说明
flex-start	(默认值) 从头部开始排列
flex-end	从尾部开始排列
center	居中对齐
stretch	(默认值)拉伸到与父元素一样高

 

align-content多行起作用的属性(flex-wrap：wrap)

属性值	说明
flex-start	(默认值) 从头部开始排列
flex-end	从尾部开始排列
center	居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间
stretch	(默认值)拉伸到与父元素一样高

 

 

flex子项属性：

1.flex - 分配剩余空间，默认值为0，数值越大分配的剩余空间越多，都为1时 平均分配剩余空间

      .son {
          flex: 0(默认值);
      }

 

2.align-self - 设置某一项不同的排列方式

属性值	说明
flex-start	(默认值) 从头部开始排列
flex-end	从尾部开始排列
center	居中对齐
stretch	(默认值)拉伸到与父元素一样高

 

3.order - 设置排列顺序 数值越小，越靠前 默认·为0