CSS3弹性盒模型

CSS3弹性盒模型

一、弹性盒模型　

　　1、采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”任何一个容器都可以指定为Flex布局。

　　2、display:flex | inline-flex      定义弹性伸缩盒容器类型

　　　　1）flex 将对象作为弹性伸缩盒显示。

　　　　2）inline-flex 将对象作为内联块级弹性伸缩盒显示。

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

　　3、容器的属性 以下6个属性设置在容器上

　　　　flex-direction

　　　　flex-wrap

　　　　flex-flow

　　　　justify-content

　　　　align-items

　　　　align-content

　　容器默认存在两根轴：水平的主轴和垂直的交叉轴。

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

　　　　交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

　　1）flex-direction 排列盒子方向

　　　　row(默认)： 横向从左到右排列（横向 ）。

　　　　row-reverse： 对齐方式与row相反。 （倒序排列）

　　　　column： 纵向从上往下排列（纵向）。

　　　　column-reverse： 对齐方式与column相反。 （倒序排列）

　　

　　2）flex-wrap：nowrap | wrap | wrap-reverse：

　　　　控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

　　　　nowrap（默认）： flex容器为单行，不换行

　　　　wrap： flex容器为多行。超出换行

　　　　wrap-reverse： 反转wrap 排列。

　　　　（1）nowrap（默认）：不换行。

　　　　

　　　　（2）wrap：换行，第一行在上方。

　　　　

　　　　（3）wrap-reverse：换行，第一行在下方。

　　　　

　　3）flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为（row nowrap）

　　4）justify-content   定义了项目在主轴上的对齐方式

　　　　justify-content: flex-start | flex-end | center | space-between | space-around;

　　　　　　flex-start（默认值）： 左对齐

　　　　　　flex-end： 右对齐

　　　　　　center： 居中

　　　　　　space-between： 两端对齐，项目之间的间隔都相等。

　　　　　　space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

　　　　　　

　　5）align-items  属性定义项目在交叉轴上如何对齐

　　　　align-items: flex-start | flex-end | center | baseline | stretch;

　　　　　　具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下

　　　　　　flex-start： 交叉轴的起点对齐。

　　　　　　flex-end： 交叉轴的终点对齐。

　　　　　　center： 交叉轴的中点对齐。

　　　　　　baseline: 项目的第一行文字的基线对齐。

　　　　　　stretch（默认值）：如果项目未设置宽高或设为auto，将沿交叉轴占满整个容器的高度或宽度。

　　　　　　

　　6）align-content  属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

　　　　align-content: flex-start | flex-end | center | space-between | space-around | stretch;

　　　　　　flex-start： 与交叉轴的起点对齐。

　　　　　　flex-end： 与交叉轴的终点对齐。

　　　　　　center： 与交叉轴的中点对齐。

　　　　　　space-between： 与交叉轴两端对齐，轴线之间的间隔平均分布。

　　　　　　space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　　　　　stretch（默认值）：各行将会拉伸以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸 　　注：多行下的align-content会使align-items失效，两者之间会有冲突，所以看情况使用。

　　　　　　

二、弹性盒子-项目属性　

　　以下6个属性设置在项目上：

　　　　order 项目排序

　　　　flex-grow 项目拓展比例

　　　　flex-shrink 项目缩小比例

　　　　flex-basis 定义拓展剩余空间前，的交叉轴的宽

　　　　flex 复合属性

　　　　align-self 自定义项目align-items

　　1）order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以负值

　　

　　2）flex-grow：<number> 定义项目的放大比例，（默认为0） 即如果存在剩余空间，也不放大。

　　　　　　子元素的尺寸=父级盒子剩余空间尺寸*子元素的flex-grow属性值 / 所有子元素的flex-grow属性值的和

　　　　

　　3）flex-shrink属性定义了项目的缩小比例，（默认为1），即如果空间不足，该项目将缩小。为 0 就不缩小

　　　　　　元素收缩宽度 = 超出宽度 * 元素收缩比/收缩总比

　　　　

　　　　如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。

　　4）flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto。

　　　　值：<length> | <percentage> | auto | content

　　　　　　<length>： 用长度值来定义宽度。不允许负值

　　　　　　<percentage>： 用百分比来定义宽度。不允许负值

　　　　　　auto： 无特定宽度值，取决于其它属性值，auto的计算规则是 检索一下你是否设置了width（或者height值，取决于flex-direction）就会采用这个值，否则的话最后使用的值是 content。

　　　　　　content： 基于内容自动计算宽度

　　5）flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

　　　　　　该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

　　　　　　建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

　　6）align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

　　　　（默认值为auto，表示继承父元素的align-items属性）。如果没有父元素，则等同于stretch。

　　　　align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;

 

 

 

 

 

 

　　

 

转载于:https://www.cnblogs.com/ttxs-cn/p/7922889.html