css3flex布局九宫格,css3flex布局
今天做⼀个⼩实战，需要让⼀个登录框始终保持⽔平和垂直居中，第⼀个想到的就是通过定位(要想让⼀个div居中，采⽤定位可以解决，⽰例)，
然后开始接触flex布局，学完感觉真的好⽤，现把知识点记录⼀下，以便⾃⼰⽇后查看(学习教程：阮⼤师的教程)，笔记开始：
传统的布局：围绕盒⼦模型(border、margin、padding)  定位(position)、浮动(float)等。
flex布局⼜叫弹性布局 ， 主要内容包括两⼤部分有： 容器(⽗元素)的六个属性和项⽬(⼦元素)的六个属性
基本概念：
采⽤ Flex 布局的元素，称为 Flex 容器(flex container)，简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬(flex item)，简称"项⽬"。
容器默认存在两根轴：⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
⼀、容器的六个属性：
1、flex-direction属性：决定主轴的⽅向，有四个属性值  row | row-reverse | column | column-reverse;
row：默认，主轴为⽔平⽅向，起点在左端；
row-reverse：主轴在⽔平⽅向，起点在右端；
column：主轴在垂直⽅向，起点在上边；
column-reverse：主轴在垂直⽅向，起点在下边；
2、flex-wrap属性：决定当⼀条轴线排不下所有的项⽬时，是否换⾏，有三个属性值：nowrap | wrap | wrap-reverse;
nowrap：默认，不换⾏，当排不下时，会按项⽬的flex-shrink属性(见下，项⽬的缩⼩⽐例，默认为1)
的值来对项⽬进⾏缩⼩；
wrap：换⾏，第⼀⾏在上⽅；
wrap-reverse：换⾏，第⼀⾏在下⽅；
3、flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap
4、justify-content属性：定义了项⽬在主轴上的对齐⽅式，有五个属性值：flex-start | flex-end | center | space-between | space-around
flex-start：默认值，主轴上起点对齐；
flex-end：主轴上终点对齐；
center：在主轴上居中；
space-between：两端(起点和终点)对齐，项⽬之间的间隔都相等；
space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍
具体的视觉上的对齐⽅式与主轴的⽅向有关，在主轴⽅向为默认情况下(主轴为⽔平⽅向，起点在左端)：
flex-start：左对齐；
flex-end：右对齐；
center：⽔平居中；
space-between：两端(左右两边)对齐，项⽬之间的间隔都相等；
space-around：每个项⽬两侧(左右两侧)的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍；
5、align-items属性：定义项⽬在交叉轴上的对齐⽅式，有五个属性值：flex-start | flex-end | center | baseline | stretch;
flex-start：默认值，交叉轴上起点对齐；
flex-end：交叉轴上终点对齐；
center：在交叉轴上居中；
baseline：
stretch：
6、align-content属性：定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤，有六个属性值，flex-start | flex-end | center | space-between | space-around | stretch
stretch(默认值)：轴线占满整个交叉轴。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍。
⼆、项⽬的属性
1、order属性：定义项⽬的排列顺序，数值越⼩排列越靠前，默认为0，
order：整数
2、flex-grow属性：定义项⽬的放⼤⽐例，当有剩余空间时即会根据该值进⾏放⼤，默认为0，即有剩余空间时也不放⼤
如果所有项⽬的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果⼀个项⽬的flex-grow属性为2，其他项⽬都为1，则前者占据的剩余空间将⽐其他项多⼀倍。
3、flex-shrink属性：定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩
如果所有项⽬的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为1，则空间不⾜时，前者不缩⼩。
负值对该属性⽆效
flex布局对齐方式4、flex-basis属性：定义了在分配多余空间之前，项⽬占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项⽬的本来⼤⼩。
可以设为跟width或height属性⼀样的值(⽐如350px)，则项⽬将占据固定空间。
5、flex属性：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
6、align-self属性：允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性。默认值为auto，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch
有六个属性值：auto | flex-start | flex-end | center | baseline | stretch
主要的注意点有：
任何元素都可以设置成弹性布局；
弹性容器中，只有直接⼦元素为弹性元素；
要想让其孙元素也为弹性元素，要在相应的弹性⼦元素上添加样式display:inherit。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。