flex属性笔记

弹性盒子  flex
设为弹性盒子  display  flex  
       display : flex  块级弹性盒子
       display:  inline flex  行内弹性容器

• 排列方式  flex-direction

                 可选值
                 row  从左向右(默认值)
                  row-reverse  从右向左
                  column   纵向排列  自上向下
                  column-reverse   自下向上
               

• 自动换行 flex-wrap

                  可选值
                 nowrap  默认值不换行
                  wrap 元素沿铺轴自动换行
                  wrap-reverse   沿辅轴反方向换行

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

 

• justify-content分配主轴空白

       可选值
        flex-start 沿主轴起边对齐排列(默认值)
        flex-end 沿主轴终边对齐排列倒序
        center  居中排列
        space-around 空白分布在元素两侧
        space-between  空白均分在元素之间
        space-evenly  空白分布元素单侧

• align-items 在铺轴上对齐排列

           可选值
         stretch默认值 将元素长度设为相同值
         flex-start  不会拉伸沿辅起边对齐
         flex-end   不拉伸 沿铺轴终边对齐倒序
          center  居中对齐

• align-self  用来覆盖align-items 用法属性一样
• align-content铺轴空白分布

         center  上下居中分布
         flex-start  靠上对齐空白在下
         flex-end    靠下对齐 空白在上
        space-around 空白分布在元素上和下
       space-between  空白均分在元素上下之间
       space-evenly  空白分布元素单侧

伸展flex-grow:1  父元素有多余空间伸展按比例
收缩flex-shrink  不足容纳按原有内容比例收缩

设置一个长度flex-basis  

 

• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

       flex:1   1  auto;   auto 能增能减
       flex:0  1  auto;    initial  能减不能增
      flex:0  0   auto;    none  不能增减没弹性

flex:auto  自动调整页面中大小不留空白

注意点

主轴是由flex-direction排列方式决定的

铺轴就是与主轴的交差轴

在flex布局上实现固定空白可以设置宽高固定占父元素的百分之几。例如width:25%