弹性盒子

Posted 2020-09-26 毁梦

概念：

          弹性盒布局模型（Flexble Box Layout）是css3规范中提出的一种新的布局方式。他可以用简单的方式满足很多常见的布局需求。

基本概念：

        采用flex布局的元素，称为flex容器，简称“容器”。他的所有子元素自动称为容器成员，称为flex项目，简称“项目”。

　　容器?默认存在两根轴：?水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start （主轴起始），

　　结束位置叫做 main end （主轴结束）；交叉轴的开始位置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。
　　项?目默认沿主轴排列列。单个项?目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size

设置在容器?上的6个属性。

　　flex-direction
　　flex-wrap
　　flex-flow
　　justify-content
　　align-items
　　align-content

1 、flex-direction 属性
　　flex-direction ?用来确定主轴的?方向，从?而确定基本的项?目排列列?方向。
　　flex-direction 属性的取值及其含义：
　　row（默认值）：主轴为?水平?方向，起点在左端；
　　row-reverse：主轴为?水平?方向，起点在右端；
　　column：主轴为垂直?方向，起点在上沿；
　　column-reverse：主轴为垂直?方向，起点在下沿。

2 、flex-wrap属性
　　默认情况下，项?目都排在?条线上（?又称“轴线”）上。 flex-wrap 属性定义，如果?条轴线排不下，如何换?。
　　flex-wrap 属性的取值及其含义：
　　nowrap（默认值）：不不换?行行（强?行行挤压，平均分配宽度）；
　　wrap：换?行行，第?一?行行在上?方（从上往下?一次排列列）；
　　wrap-reverse：换?行行，第?一?行行在下?方（从下往上?一次排列列）；
　　说明：如果?高度固定，并且有多余空间，那么多余空间将会平均分配给每?一?行行的外边距。

3 、flex-flow
　　flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
　　.box{ flex-flow: row wrap; }

4 、justify-content 属性
　　justify-content 属性定义了了项?目在主轴上的对?齐?方式。
　　justify-content 属性的取值及其含义：
　　（具体对?齐?方式与主轴的?方向有关。下?面假设主轴为从左到右。）
　　flex-start（默认值）：左对?齐
　　flex-end：右对?齐
　　center： 居中
　　space-between：两端对?齐，项?目之间的间隔都相等。
　　space-around：每个项?目两侧的间隔相等。所以，项?目之间的间隔?比项?目与边框的间隔?大?一倍。

5 、align-items 属性
　　align-items 属性定义项?目在交叉轴上如何对?齐。
　　align-items 属性的取值及其含义：
　　（具体对?齐?方式与交叉轴的?方向有关。下?面假设交叉轴为从左到右。）
　　flex-start：交叉轴的起点对?齐。
　　flex-end：交叉轴的终点对?齐。
　　center：交叉轴的中点对?齐。
　　baseline：所有?文字相对于同?一基线对?齐

6 、align-content 属性
　　align-content 属性定义了了多根轴线的对?齐?方式。如果项?目只有?一根轴线，该属性不不起作?用。
　　align-content 属性的取值及其含义：
　　flex-start：与交叉轴的起点对?齐。
　　flex-end：与交叉轴的终点对?齐。
　　center：与交叉轴的中点对?齐。
　　space-between：与交叉轴两端对?齐，轴线之间的间隔平均分布。
　　space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔?比轴线与边框的间隔?大?一倍。
　　stretch（默认值）：轴线占满整个交叉轴。

设置在项?目上的6种属性。

　　order
　　flex-grow
　　flex-shrink
　　flex-basis
　　flex
　　align-self

1 、order 属性
　　order 属性定义项?目的排列列顺序。数值越?小，排列列越靠前，默认为0。
　　.item:nth-child(3){
　　order:-1;
　　}

2 、flex-grow 属性
　　flex-grow 属性的值是?一个没有单位的?非负数，默认值为0。?用来定义项当容器?有多余的空间时，这些空
　　间在不不同条?目之间的分配?比例例。
　　.item{
　　flex-grow:1;
　　}
　　如果所有项?目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果?一个项?目的flex-grow属性为2，

　　其他项?目都为1，则前者占据的剩余空间将?比其他项多?一倍。

3 、flex-shrink 属性
　　flex-shrink 属性在使?用上类似于" flex-grow "。默认值为1。该属性的值也是?无单位的，表示的是当
　　容器?的空间不不?足时，各个项?目的尺?寸缩?小的?比例例。
　　.item{
　　flex-shrink:1;
　　}
　　如果所有项?目的flex-shrink属性都为1，当空间不不?足时，都将等?比例例缩?小。如果?一个项?目的flex-shrink属性为
　　0，其他项?目都为1，则空间不不?足时，前者不不缩?小。
　　负值对该属性?无效。

4、 flex-basis 属性
　　flex-basis 属性定义了了项?目占据的主轴空间?比例例。浏览器?根据这个属性，计算主轴是否有多余的空间。
　　它的默认值是auto，即项?目的本来的?大?小。
　　.item{
　　flex-basis:50%;
　　}
　　它可以设为跟 width 或 height 属性?一样的值（?比如350px），则项?目将占据固定空间。
5 、flex 属性
　　flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
　　.item{
　　flex:none;
　　}　　
　　该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。
　　建议优先使?用这个属性，?而不不是单独写三个分离的属性，因为浏览器?会推算相关值。
6、 align-self 属性
　　align-self 属性允许单个项?目有与其他项?目不不?一样的对?齐?方式，可覆盖 align-items 属性。默认值
　　为auto，表示继承?父元素的 align-items 属性，如果没有?父元素，则等同于 stretch 。
　　align-self 属性的取值，除了了多?一个auto，其他都与 align-items 属性完全?一致。
　　flex-start：交叉轴的起点对?齐。
　　flex-end：交叉轴的终点对?齐。
　　center：交叉轴的中点对?齐。
　　baseline：所有?文字相对于同?一基线对?齐