关于 flex 基础 以及 兼容性写法(一)

知识来源：

https://blog.csdn.net/cddcj/article/details/52131089

https://www.runoob.com/w3cnote/flex-grammar.html

在线实验：

https://www.runoob.com/try/try.php?filename=trycss3_flex-direction

 

弹性布局 flex  具有很方便的布局能力，但是部分浏览器对 flex 并不是很友好

 

1.指定flex布局

.box{
 　　　display:flex;
　 　　display: -webkit-flex; /* 兼容苹果的浏览器Safari */ 
　　}

行内元素也可以使用Flex布局。

.box{
　　 　　display:inline-flex 
　　}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：

　　1、水平的主轴（main axis）：开始位置（与边框的交叉点）叫做  main start，结束位置叫做main end；

　　2、垂直的交叉轴（cross axis）：开始位置叫做cross start，结束位置叫做cross end。

项目默认沿水平排列（主轴）。单个项目占据的水平主轴空间叫做 main size，占据的垂直交叉轴空间叫做 cross size。

 

 

---

休息下，下面还挺长的，快乐的分页符

---

2.容器属性

 

2.1、flex-direction： 属性决定 子元素 的 排序方向（上到下，或左到右）

可以设置为：

　　　　—》flex-direction：row 水平，靠左上角  且  正序

 

注意：如果子项太多，则会自动压缩子项的宽度，造成变形、

这是因为flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
不想让它缩小，就设置 flex-shrink:0;

 

  

　　　　—》flex-direction：row-reverse 水平，靠右上角  且  倒序(起点在右侧)

　　　　—》flex-direction：column 垂直，靠左上角  正序

 

 

　　　　—》flex-direction：column-reverse 垂直，靠左下角   倒序（起点底部）

 

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-direction 属性。

注意: Safari 6.1 及更新版本通过 -webkit-flex-direction 属性支持该属性。

  

 

 2.2、flex-wrap：   决定 子元素 换不换行，如何换行

Title

　　　　　　可以设置为：

　　　　—》nowrap 不换行，但是 子元素 的宽度会被压缩

 

　　　　—》wrap 换行

　　　　—》wrap-reverse 换行，最后一行在顶部，第一行在下方

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。

注意: Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性.

 

　　2.3、flex-flow：  flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

Title

.box { flex-flow: <flex-direction> <flex-wrap>;
}

　　2.4、 justify-content： 子元素的对齐方式

　　　　　　　可以设置为：

　　　　—》justify-content: flex-start  左对齐

 

　　　　 —》justify-content: flex-end 右对齐

 

　　　　—》justify-content: center 居中

 

　　　　 —》justify-content: space-between  两端对齐贴紧，项目间间隔相等

 

　　　　—》justify-content: space-around  每个项目两两间隔相

 

注意: Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。

注意: Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。

 

 

　　2.5、align-items       定义项目在 垂直 交叉轴上如何对齐　　

Title

 　　　　—》align-items: flex-start     元素位于容器的开头

　　　　—》flex-end　　元素位于容器的结尾。

　　　　—》center　　垂直居中

 

　　　　—》baseline　　元素位于容器的基线上。

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

 

　　　　—》stretch　　默认值。元素被拉伸以适应容器：未设或auto，将占满整个容器高度

 

注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。

注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。

 

2.6、align-content      针对用于 容器 下的 多行 子元素 进行 位置布局（一般与flex-wrap配合使用），如果没用拥有多行子元素，则失效;

Title

解释不清，自己动手吧：https://www.runoob.com/try/try.php?filename=trycss3_align-content

这里还一个：https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=stretch

（个人理解：align-content 一般应该是和flex-wrap进行配合使用，flex-wrap决定了多行的子元素，而align-content决定了这些子元素的布局方式）

　　　　—》stretch;　　　　默认值(initial)。元素被上下拉伸间距以适应容器。

 

 　　　　—》center　　子元素朝中心挤压，使元素位于容器的中心。（好像是垂直中心）

 　　　　—》align-content: flex-start　　 子元素位于容器的开头（朝起始位置堆叠）

 

　　　　—》flex-end　　  子元素位于容器的结尾（朝结束位置堆叠）

 

　　　　—》space-between　　子元素在各行在弹性盒容器中头尾置顶，空白处平均分布

 

　　　　—》space-around　　子元素在弹性盒容器中平均分布。都拥有相同的上下间距

 

 

　

2.7 box-orient         指定一个box子元素是否应按水平或垂直排列。

　　　—》box-orient：horizontal  水平（默认）
　　　　—》vertical：垂直
　　　　—》inline-axis：子元素沿内联坐标轴（映射到横向）
　　　　—》block-axis：子元素沿块坐标轴（映射到垂直）

 

 

 

==================================================================下面是复制的了。。

 

4.项目属性
    
    。order：项目的排列顺序
    。flex   
    。flex-grow  放大比例
    。flex-shrink 缩小比例
    。flex-basis  主轴空间大小
    。align-self  允许单个项目有与其他项目不一样的对齐方式
   
    4.1 order 定义项目的排列顺序
        -》order: <integer>;
        数值越小，排列越靠前，默认为0;

    4.2 flex-grow 

        -》 flex-grow: <number>; /* default 0 */

        项目的放大比例，默认是0，即若存在剩余空间，也不放大。
        flex-grow属性都为1，将等分剩余空间；
        flex-grow属性为2，其他都为1，则前者占据的剩余空间比其他项多一倍。
  

       
    4.3 flex-shrink

        -》flex-shrink: <number>; /* default 1 */

        项目的缩小比例，默认是1，即空间布局，该项目将缩小。
        flex-shrink属性都为1，将等比例缩小；
        若一个项目flex-shrink属性为0，其他都为1，则空间不足时，设为0的不缩小。
 
        负值对该属性无效。

     4.4 flex-basis

         -》flex-basis: <length> | auto; /* default auto */

         在分配多余空间之前，项目占据的主轴空间大小。默认为auto，即项目的本来大小。
         被省略为0%，零尺寸。

     4.5 flex

         -》flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

         flex属性是 flex-grow，flex-shrink，flex-basis缩写，默认为0 1 auto。
         后两个属性可选。
     
         该属性有两个快捷值：auto( 1 1 auto)和none( 0 0 auto)。
         建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
         
      详细：其中<flex-basis>被省略默认为0%
                <flex-basis>指定auto，取决于自身<width>，若宽没定义，则长度取决于内容。
      
       flex:1 == flex: 1 1 0%;  
       flex:none == flex:0 0 auto;
       flex:auto == flex:1 1 auto;
      

       例如：<div>
                    <p id="p1">Hello</p>
                    <p>Hello</p>
           
             </div>

             div{ width:300px; display:flex; }
             div #p1{ flex:1; }
               
 
       【flex:1 意思是设置后DIV有灵活的长度，即其余auto宽度后,  剩余的的都是flex:1它的】

      4.6 align-self

          -》align-self: auto | flex-start | flex-end | center | baseline | stretch;
          允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。