Web前端自学记录（九） （flex）（less）

弹性盒（Flex）

1.flex(弹性盒、伸缩盒)

flex是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，
flex可以使元素具有弹性，让元素可以根据页面的大小改变而改变

弹性容器

 要使用弹性盒，必须先将一个元素设置为弹性容器
 我们通过display来这是弹性容器
     display:flex 设置为块级弹性容器
     display:inline-flex 设置为行内的弹性容器

弹性元素

弹性容器的子元素是弹性元素(弹性项)
一个元素可以同时是弹性容器和弹性元素

2.弹性容器的样式

flex-direction 指定容器中弹性元素的排列方式

可选值：
    row 默认值 弹性元素在容器中水平排列
    row-reverse 弹性元素水平反向排列
    column 弹性元素纵向排列
    column-reverse 弹性元素纵向反向排列

主轴：
    弹性元素的排列方向称为主轴
侧轴：
    与主轴垂直方向的称为侧轴

flex-wrap:设置弹性元素是否在弹性容器中自动换行

可选值：
    nowrap 默认值 元素不会自动换行
    wrap 元素沿着侧轴方向自动换行
    wrap-reverse 元素沿着侧轴反方向换行

flex-flow: wrap和direction的简写属性

justify-content: 如何分配主轴上的空白空间(主轴上的元素如何排列)

可选值：
    flex-start：元素沿着主轴的起边