前言

CSS3之Flex弹性布局的基本使用方法

一、flex弹性布局的优缺点

• 传统布局(display+position+float)的布局方式，兼容性好，但是比较繁琐，局限性。
• flex弹性布局，容易上手，布局方式简易，根据flex规则，很容易达到某个布局效果；但是flex弹性布局在pc端兼容性不好，只能兼容ie9及以上

二、flex弹性布局的基本了解

• 弹性布局是给父元素设置的(通过display: flex)，父元素就会变成一个弹性容器，其子元素就是容器成员，项目。通过父元素来操作子元素的位置和排序方式
• 弹性容器有两条轴，分为主轴和侧轴（也可以叫做x轴和y轴，行和列）。项目(子元素)会在主轴上进行排序
• 弹性布局可以将容器子元素排序，对齐，分配空白空间
• 父元素设置弹性布局后，弹性容器里的子元素不再有块级，行内，行内块标签之分，vertical-algin、clear、float属性将会失效，且元素不会脱标

三、父项属性（就是父元素的flex属性）

• justify-content
  

  • 设置元素在主轴的排列方式，常用的有center(居中)、flex-between(行头行尾贴边，中间其余元素按剩余空间比列排序)。

• align-items
  

  • (单行，就是元素全部在一行)设置元素在y轴的位置；常用的有center(居中)，flex-strat(侧轴的顶部)，flex-end(侧轴的底部)

• flex-wrap
  

  • 设置在主轴排序的元素是否换行，默认不换行(就是所有的子元素会全部排列在一条线上，不会自动换行)；nowrap(不换行)，wrap(换行)

• algin-content
  

  • （多行，就是设置自动换行，子元素不全都在一行）设置侧轴的排序方式，常用的有center(居中)、flex-between（行头行尾贴边，中间其余元素按剩余空间比列排序）；只限于多行

• flex-direction
  

  • 设置主轴
  • row 默认的  设置主轴为横向的从左到右（相当于设置x轴为主轴）
    • column设置主轴为纵向的，从上到下（相当设置y轴为主轴）
• 这里只列举了常用的，还要其他属性值可以查阅文档

四、子项属性

• flex
  

  • 设置当前子元素在容器所占比列

• align-slef
  

  • 设置当前子元素侧轴对齐方式，会覆盖父元素的align-items属性，属性值和align-items差不多

• order
  

  • 设置当前子元素的位置，值越小与往前

总结

以上就是flex弹性布局的基本使用方法